我有以下代码:
的CSS
#container{
font-size: 0.625em;
}
#div1 {
width: 200px;
height: 200px;
background-color: green;
}
#div2 {
width: 20em;
height: 20em;
background-color: red;
}
的HTML
<div id="container">
<div id="div1">
This is a test message.This is a test message.This is a test message.This is a test message.
</div>
<div id="div2">
This is a test message.This is a test message.This is a test message.This is a test message.
</div>
</div>
Chrome版本
Version 35.0.1916.153 m
当您在Chrome中放大至50%或更小时,两个div的大小将变得不同。
如果您在开发工具中检查字体大小,您将意识到
Chrome会自动增加文档的字体大小。
谁能告诉我为什么会这样吗?
我该如何预防呢?
我正在研究em和px的区别,因此将#div2的宽度更改为200px是不可接受的。
JsFiddle Link
更新了内容和来源。
谢谢您的帮助。
2014年6月16日更新
在这里发现了一些有趣的东西并想与大家分享。
如果您曾经在Chrome中触摸过“高级字体设置”,或者使用默认版本(非中文或日语):
您将永远不能将字体大小设置为小于6像素的数字(中文或日文版本为12像素)。
当您用“ em”测量“ height”之类的值时,1em永远不会小于6px(12px)。
如果将文本设置为6px,并缩放到50%,则可能希望看到文本渲染为3px(变为一半)。但是文字会被镶边设置为12px,可能会破坏您的布局。
感谢Dawar Husain。他帮助我实现了最小字体大小的事情。
最佳答案
看,您将px用于第一个div,将em用于第二个div。
Chrome的最小字体大小和字体小于将显示为该字体大小的字体。 (请参阅您的Chrome设置)
现在,将div与px一起使用时,该框会继续打开,并在以33%(或25%或50%)缩放时变得更小,但使用em时,当达到最小字体大小时,该框将保持相同的大小。看到
em在通过缩放字体大小(例如Chrome)来实现缩放的浏览器中很有用。因此,如果您使用em调整所有元素的大小,它们将相应地缩放。
em确保即使div的大小更改(缩放时),整个内容仍按原样显示。希望你能得到答案:)
编辑
在IE10中,设置中没有最小字体大小,如GC35中所示。因此em px彼此渲染。
关于css - Chrome缩小时会增加字体大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24200797/