简单的边距属性在IE和FireFox中正确显示,但在Chrome中不显示

时间:2012-03-20 07:09:50

标签: html css3 css

两个主要的容器块(带有方形瓷砖/菜单项的容器块) 并且上面的顶部块具有相同的宽度并且总体上正确排列 Chrome以外的浏览器。

这是由Chrome未呈现以下保证金属性引起的 准确地出于某种原因。将保证金权利放在4px排序 得到正确的宽度,但这将打破资源管理器和FireFox中的布局。 不知道是什么导致了它。查看小提琴的实例。只需拉伸框架即可 看到整件事。

 DIV.RootCell
{
 width: 134px;
 height: 120px;
 margin-right: 3px;     //<-------------
 display:inline-block;
 float:left;

}

http://jsfiddle.net/yHxsS/7/

1 个答案:

答案 0 :(得分:1)

Firefox和Chrome对我来说都是1 px。我看到的问题是:

顶部框被宣布为937px宽。

下面的网格中有7个元素。每个宽134微米,右边距3px。这意味着你得到(134x7)+(3x6)作为可见宽度。当你进行数学运算时,它的宽度为956px,比顶盒的声明宽一个。如果您将顶部框设为936px,它应该可以在Chrome和Firefox中使用。

并且,您可以在此处看到Chrome和Firefox中的更改工作:http://jsfiddle.net/jfriend00/bdP8p/1/

此外,请检查您的浏览器缩放级别并确保其为100%。我注意到你的布局对浏览器缩放很敏感,因为当你放大或缩小(100%以外的任何东西)时,你的布局变得很容易。