I have seen many developers writing HTML or CSS inline style widths of 99.9% in places where I would use 100%. Is there any valid reason for using 99.9%? Does it have any effective difference from 100%?
EDIT to retweet MSalters’ very good question: Considering that 99.9% is one pixel off above 500 pixels, why not 99.99%? I’d guess he’s right, that if you’re going with the dirty hack you should use 99.99%, does anyone disagree?
Additional References:
- @Michael Stum’s comment about the CSS zoom property led me to this interesting link about triggering hasLayout with
zoom: http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm. - @Andrew Dunn offered this incredibly comprehensive link on hasLayout: http://www.satzansatz.de/cssd/onhavinglayout.html
The
hasLayoutpropertyIt’s a dirty hack used to set the IE specific
hasLayoutproperty of the element to true. ThehasLayoutproperty "determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events." Giving an elementlayoutis an easy way to fix many layout related bugs which appear in Internet Explorer.What’s with the 99.9%?
Setting the width to 99.9% is one way to trigger it. The reason you would use 99.9% is because layout is given to an element if its
widthis set to anything other thanauto. Setting it to a percentage prevents the need to use a fixed width.After some testing in jsFiddle, I’ve come to the conclusion that it really isn’t necessary to to use a width of 99.9%, using a width of 100% is just as effective. http://jsfiddle.net/3qfjW/2/ (IE-Only). It seems that setting
widthto 99.9% may have been a common misconception which stuck.. Spread the word people.Other methods
You can also trigger
hasLayoutusingzoom: 1;While this is the preferred method for many, as it doesn’t mess with other style related features of an element, it is also invalid CSS code, which is not an option to use for some developers.Further Reading
For more methods to trigger
hasLayoutcheck out: http://www.satzansatz.de/cssd/onhavinglayout.htmlFor more information on the
hasLayoutproperty check out the MSDN article onhasLayouthttp://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx (This is actually a great read, lots of detailed information)