0

If the following conditions are met, setting zoom:1 hides the element's content:

  1. Markup must have this structure:

    <table><tr><td>
    <div class="overflow">
        <span class="zoom">zoom</span>
    </div>
</td></tr></table>

  2. These styles must be defined:

    .somethingSPECIAL .zoom {
    zoom: 1;
}
.overflow {
    width: 300px;  /* Whatever px here. */
    height: 150px; /* Whatever px here. */
    overflow: auto;
}

  3. The somethingSPECIAL class should be applied to any ancestor of the markup above after page load (like on a button click).

  4. The browser you've been forced to use must be IE8 in Compatibility View.

Here's a live demo.

Why is this happening, and what can I do to prevent it? (I can't get rid of zoom: 1. I also have to set the parent class as shown in the demo.)

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Not Dr. Horn
  • 3
  • 1

1 Answers1

0

I noticed that the width and height of the span element went from 33x19 to 0x0. So if you set it back to 'auto' it works.

$('.zoom').css('width', 'auto');

See http://jsfiddle.net/GgY6C/29/

aakoch
  • 1,164
  • 1
  • 9
  • 18
  • That's redonkulous, but it works. Thanks! Any theories on why IE8CV does this? – Not Dr. Horn Jul 19 '12 at 20:48
  • Also, I guess just resetting the `span`s class works too, and this won't mess up any spans that might have a width (when they also have display:block). `.find('.zoom').addClass('.zoom')` http://jsfiddle.net/GgY6C/30/ – Not Dr. Horn Jul 19 '12 at 21:06
  • Whoops! Missed the typo. ".zoom" isn't a class and wasn't reapplying zoom:1... It was just adding a class doing nothing. This would work too: `.find('.zoom').addClass('somethingThatDoesntEvenExist')`. WTF? http://jsfiddle.net/GgY6C/31/ – Not Dr. Horn Jul 20 '12 at 13:43