2013-12-10 67 views
0

我有两种相似的风格。当我在镀铬检查员中查看它们时,它们具有不同的值,尽管所用的样式相似。浏览器如何计算“自动”值?

enter image description here

的元件的边缘具有“自动”值,但是当通过浏览器来计算它们之间存在一个很大的区别虽然宽度是相同的。

对于那些会要求我将它指向单个样式表的人,实际上我不能这样做,因为第一个样式是用于wordpress主题,另一个样式是用于whmcs模板。

更新:

添加了这两个截图。这两个窗口被最大化

screenshot1

screenshot2

回答

1

auto不是一个特定的值和块元件上基本上是指让浏览器决定。 (如在,占用剩余空间)。我期望您的浏览器窗口宽度为,或者父元素在您看到较大的余量被渲染的情况下更宽。 (请参阅“样式”选项卡,而不是“计算”以查看应用的样式)

当您为左右边距设置auto时,它将居中该元素。如果仅为左边距设置auto,则该元素将对齐到右侧。

更多的https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values

+0

是的,这就是为什么我问为什么它有不同的价值。宽度都是1170.所以它应该占用双方的剩余空间。这是样式选项卡的屏幕截图。 http://prntscr.com/2a2fmp – kapitanluffy

+0

@kapitanluffy我看到''bootstrap.css'中的左边界和右边界都具有'auto'的值。我无法真正看到那个截图中有什么问题?页面的外观如何,它不是将元素居中? – xec

+0

如果你看一下计算的边际,他们之间有一个巨大的差异差不多60px。另外如果font-size被显式声明为14px,它应该显示14px的权利?看看这个截图。 http://prntscr.com/2a2jss – kapitanluffy

0

我想通了这个问题。 Chrome以不同的方式渲染它。其他浏览器正确显示它。只有我的电脑中的Chrome浏览器以不同的方式显示它。我的手机中的Chrome浏览器显示正确,所以我猜这是浏览器问题。