在Chrome和火狐浏览器中使用纯CSS的CSS宽度

首先，我对CSS还很陌生，所以我希望我没有做过任何可怕的愚蠢的事情。在Chrome和火狐浏览器中使用纯CSS的CSS宽度

基本上，我正在使用Pure构建的设计，并且宽度在Google Chrome中播放，而它在Firefox中按照预期工作。

下面是我做了什么链接：http://egf.me/Rushd/rushdtest.html和截图：

火狐：http://i.imgur.com/mn3GIbT.png
铬：http://i.imgur.com/44jLC6J.png

如果你看一下网页源代码，我在我自己的CSS中没有真正做任何事情来改变任何东西（我把它全部作为一个检查来评论），所以我猜想我以某种方式使用Pure错误，因为他们自己的站点在Chrome上渲染得很好。

此外，使用Chrome的开发工具检查元素显示，应该彼此相邻的div元素的宽度合计小于父元素的宽度。并没有什么似乎有缓冲区或填充。另外，如果我手动将宽度减小到非常小，Chrome似乎会奇迹般地修复所有内容。

2013-07-01 user478250

非常怪异确实如此。我用铬进行检查，父容器比儿童宽。 pure-g-r容器为1141.796875px，两个孩子共761.1875 + 380.59375 = 1141.78125 px。我找不到任何边距或填充物。 – Drkawashima

问题是在您的子div之间呈现空间。问题既不是边距，也不是填充 - 它实际上是由HTML代码中的div标签之间的空白引起的！

将没有任何空白和您的问题直接相邻的海誓山盟标签将被解决。）

Example code

<!--whitespace in HTML = renders as a space between the divs--> 
    <div></div> 
<div></div> 
<!--no whitespace in HTML = renders edge to edge--> 
<div></div><div><div>

来源

2013-07-01 11:44:42 Drkawashima

哇，什么！？其实就是这样。这到底是什么？ D：所以基本上我必须缩小HTML或Chrome会打破？这似乎是一个非常糟糕的决定。 – user478250

我之前没有想过这个。我的div标签之间总是有空格。 – Drkawashima

在IE中和Chrome一样;）我认为这里的关键是内嵌样式的DIV。内联样式元素之间的空白代码在页面上呈现为空格。如果你仔细想想，这并不奇怪。如果您在两个自然内联元素（如SPAN或IMG）之间写入空格，则会期望页面上出现空间。我想这些浏览器以同样的方式解释内联风格的DIV元素之间的空格。但这是我第一次真正注意到，不确定我会推荐哪种解决方案。 – Drkawashima

在Chrome和火狐浏览器中使用纯CSS的CSS宽度

回答

相关问题