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%?
我见过许多开发人员在我使用100%的地方编写HTML或CSS内联样式宽度为99.9%。使用99.9%是否有正当理由?它与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?
编辑转发MSalters非常好的问题:考虑到99.9%是500像素以上的一个像素,为什么不99.99%?我猜他是对的,如果你要肮脏的黑客,你应该使用99.99%,有人不同意吗?
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. - @Michael Stum关于CSS缩放属性的评论让我得到了关于触发带有缩放的hasLayout的有趣链接: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
- @Andrew Dunn在hasLayout上提供了这个令人难以置信的全面链接:http://www.satzansatz.de/cssd/onhavinglayout.html
2 个解决方案
#1
37
The hasLayout
property
It's a dirty hack used to set the IE specific hasLayout
property of the element to true. The hasLayout
property "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 element layout
is an easy way to fix many layout related bugs which appear in Internet Explorer.
这是一个肮脏的黑客,用于将元素的IE特定hasLayout属性设置为true。 hasLayout属性“确定元素如何绘制和绑定其内容,与其他元素交互并与之相关,以及对应用程序/用户事件做出反应和传输。”提供元素布局是修复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 width
is set to anything other than auto
. Setting it to a percentage prevents the need to use a fixed width.
将宽度设置为99.9%是触发它的一种方法。您使用99.9%的原因是因为如果元素的宽度设置为auto以外的任何值,则会给予元素布局。将其设置为百分比可以防止使用固定宽度。
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 width
to 99.9% may have been a common misconception which stuck.. Spread the word people.
经过jsFiddle的一些测试后,我得出的结论是,没有必要使用99.9%的宽度,使用100%的宽度同样有效。 http://jsfiddle.net/3qfjW/2/(仅限IE)。似乎将宽度设置为99.9%可能是一种常见的错误概念,这种错误一直困扰着人们。
Other methods
You can also trigger hasLayout
using zoom: 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.
您还可以使用zoom触发hasLayout:1;虽然这是许多人的首选方法,因为它不会混淆元素的其他样式相关功能,但它也是无效的CSS代码,这对于某些开发人员来说不是一个选项。
Further Reading
For more methods to trigger hasLayout
check out: http://www.satzansatz.de/cssd/onhavinglayout.html
有关触发hasLayout的更多方法,请查看:http://www.satzansatz.de/cssd/onhavinglayout.html
For more information on the hasLayout
property check out the MSDN article on hasLayout
http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx (This is actually a great read, lots of detailed information)
有关hasLayout属性的更多信息,请查看有关hasLayout的MSDN文章http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx(这实际上是一个很棒的阅读,很多详细信息)
#2
3
It's true width
of anything but auto
and zoom
trigger hasLayout, and zoom
is the more flexible property/value since it doesn't mess with the width but I don't think that's the reason why you saw the developers use 99.9%.
这是真正的宽度,但自动和缩放触发器hasLayout,并且缩放是更灵活的属性/值,因为它不会弄乱宽度,但我不认为这是你看到开发人员使用99.9%的原因。
In certain floating cases it's necessary that the combined width of the floats do not add up to 100% ( if specified in percentages ) because IE6 incorrectly calculates that as beyond 100% and usually the latter float drops.
在某些浮动情况下,浮动的组合宽度必须不加100%(如果以百分比指定),因为IE6错误地计算超过100%并且通常后者浮点数下降。
The solution is to either specify a -1px right margin just for IE or make the sum 99.99%.
解决方案是为IE指定-1px右边距或使其总和为99.99%。
I have documented the bug here. So whether it is related or not to what you were seeing, hope the bug link helps anyone experiencing it.
我在这里记录了这个错误。因此,无论是否与您所看到的相关,希望错误链接可以帮助任何体验它的人。
#1
37
The hasLayout
property
It's a dirty hack used to set the IE specific hasLayout
property of the element to true. The hasLayout
property "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 element layout
is an easy way to fix many layout related bugs which appear in Internet Explorer.
这是一个肮脏的黑客,用于将元素的IE特定hasLayout属性设置为true。 hasLayout属性“确定元素如何绘制和绑定其内容,与其他元素交互并与之相关,以及对应用程序/用户事件做出反应和传输。”提供元素布局是修复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 width
is set to anything other than auto
. Setting it to a percentage prevents the need to use a fixed width.
将宽度设置为99.9%是触发它的一种方法。您使用99.9%的原因是因为如果元素的宽度设置为auto以外的任何值,则会给予元素布局。将其设置为百分比可以防止使用固定宽度。
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 width
to 99.9% may have been a common misconception which stuck.. Spread the word people.
经过jsFiddle的一些测试后,我得出的结论是,没有必要使用99.9%的宽度,使用100%的宽度同样有效。 http://jsfiddle.net/3qfjW/2/(仅限IE)。似乎将宽度设置为99.9%可能是一种常见的错误概念,这种错误一直困扰着人们。
Other methods
You can also trigger hasLayout
using zoom: 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.
您还可以使用zoom触发hasLayout:1;虽然这是许多人的首选方法,因为它不会混淆元素的其他样式相关功能,但它也是无效的CSS代码,这对于某些开发人员来说不是一个选项。
Further Reading
For more methods to trigger hasLayout
check out: http://www.satzansatz.de/cssd/onhavinglayout.html
有关触发hasLayout的更多方法,请查看:http://www.satzansatz.de/cssd/onhavinglayout.html
For more information on the hasLayout
property check out the MSDN article on hasLayout
http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx (This is actually a great read, lots of detailed information)
有关hasLayout属性的更多信息,请查看有关hasLayout的MSDN文章http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx(这实际上是一个很棒的阅读,很多详细信息)
#2
3
It's true width
of anything but auto
and zoom
trigger hasLayout, and zoom
is the more flexible property/value since it doesn't mess with the width but I don't think that's the reason why you saw the developers use 99.9%.
这是真正的宽度,但自动和缩放触发器hasLayout,并且缩放是更灵活的属性/值,因为它不会弄乱宽度,但我不认为这是你看到开发人员使用99.9%的原因。
In certain floating cases it's necessary that the combined width of the floats do not add up to 100% ( if specified in percentages ) because IE6 incorrectly calculates that as beyond 100% and usually the latter float drops.
在某些浮动情况下,浮动的组合宽度必须不加100%(如果以百分比指定),因为IE6错误地计算超过100%并且通常后者浮点数下降。
The solution is to either specify a -1px right margin just for IE or make the sum 99.99%.
解决方案是为IE指定-1px右边距或使其总和为99.99%。
I have documented the bug here. So whether it is related or not to what you were seeing, hope the bug link helps anyone experiencing it.
我在这里记录了这个错误。因此,无论是否与您所看到的相关,希望错误链接可以帮助任何体验它的人。