Chrome宽度wierdness在Chrome和Firefox与Pure CSS [英] CSS width wierdness in Chrome and Firefox with Pure CSS

问题描述

首先，我还是很新的CSS，所以我希望我没有做任何可怕的愚蠢的。

基本上，我有一个设计使用 Pure 创建，宽度在Google Chrome中正在播放，而其在Firefox中正常工作。

以下是我完成的操作的链接： http ：//egf.me/Rushd/rushdtest.html 和屏幕截图：

• Firefox： http://i.imgur.com/mn3GIbT.png


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

ul>



如果你看一下页面源代码，我没有在我自己的CSS中做任何改变任何东西（我评论所有的东西作为检查，只是为了确保）因此，我猜想我在某种程度上使用Pure错误，因为他们自己的网站在Chrome上渲染得很好。





此外，使用Chrome的开发工具检查元素显示应该彼此相邻的div元素具有的总和小于父元素的宽度。没有什么似乎有缓冲区或填充。

解决方案

问题是，如果我手动将宽度减小到非常小，在你的孩子div之间呈现一个空格。
这个问题既不是边距也不是填充 - 它实际上是由HTML代码中的div标签之间的空白引起的！





将标签直接放在邻近的eachother任何空格和您的问题都会得到解决;）





示例代码

 <！ -  HTML中的空格=表示为divs之间的空格 - > 
< div>< / div> 
< div>< / div> 
<！ -  HTML中没有空格=表示边到边 - > 
< div>< / div>< div>< div> 
  




To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.

Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.

Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:

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

If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.

Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.

解决方案

The problem is that a space is rendered between your child divs. The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!

Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)

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>

这篇关于Chrome宽度wierdness在Chrome和Firefox与Pure CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！