使用Pure CSS在Chrome和Firefox中使用CSS宽度

Question

首先,我对CSS很新,所以我希望我没有做过任何可怕的愚蠢行为.

基本上,我有一个设计,我正在使用Pure构建,宽度在谷歌Chrome中播放,而它在Firefox中的工作原理.

这是我所做的链接:http://egf.me/Rushd/rushdtest.html和截图:

• Firefox:http://i.imgur.com/mn3GIbT.png
• Chrome:http://i.imgur.com/44jLC6J.png

如果你看一下网页源代码,我还没有真正做了什么,我自己的CSS改变什么(我评论了这一切作为检查以防万一),所以我我莫名其妙地使用纯猜测错误,因为他们自己的网站在Chrome上呈现良好.

此外,使用Chrome的开发工具检查元素显示应该彼此相邻的div元素的宽度加起来小于父元素的宽度.似乎没有任何缓冲区或填充.此外,如果我手动减少宽度非常小,Chrome似乎神奇地修复了一切.

Answer 1

问题是你的孩子div之间有一个空格.问题既不是边距也不是填充 - 它实际上是由HTML代码中div标签之间的空格引起的!

将标签直接放在彼此相邻的位置,没有任何空格,您的问题将得到解决;)

示例代码

<!--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>