What bug does zoom:1; fix in CSS?

css internet-explorer internet-explorer-7 internet-explorer-6
Web_Designer picture Web_Designer · Jun 9, 2011 · Viewed 32.4k times · Source

I have seen people apply the CSS property zoom: 1; on HTML elements.

Why do they do this, and what bug does it fix?

Answer

thirtydot picture thirtydot · Jun 9, 2011

This provides an internal property known as hasLayout in Internet Explorer versions 7 and lower.

The definitive article on the subject is here: http://www.satzansatz.de/cssd/onhavinglayout.html

A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” In this article, the authors focus on some aspects of this complicated matter.

“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.

For an example of a specific bug that zoom: 1 (and so hasLayout) helps to fix:

Inline block doesn't work in internet explorer 7, 6

Related questions

IE6/IE7 css border on select element

Does anyone have a solution for styling the borders of "select" elements in Internet Explorer using CSS?

Read More
How can I set CSS only for specific IE browsers?

I have a CSS/jQuery Checkbox style script: http://jsfiddle.net/BwaCD/ The problem is, in current browsers in order for the span to float over the input, the input's position must be absolute. But in IE8 & below, the …

Read More
Inline block doesn't work in internet explorer 7, 6

I have this CSS code with an inline-block. Can anyone tell me how to make it work in Internet Explorer 6 and 7. Any ideas? Maybe I'm doing something wrong? Thank you! #signup { color:#FFF; border-bottom:solid 1px #444; text-transform:uppercase; text-align:center; } #…

Read More