背景应该居中并尊重填充
这里是一个片段（如果您使用的是 Opera，请查看 此链接）。 正如我们所看到的，在 webkit 浏览器中，我们可以看到背景图像在居中时尊重填充， 而在（至少 Firefox 和 Opera）中情况有所不同。
所以，问题如下 - 什么行为实际上是正确的，而且更重要的是，我怎样才能统一布局？
UPD：不要浪费时间试图在臭名昭著的CSS重置集中找到适当的规则，因为我已经尝试过）））
Here is a snippet (if you are using Opera, check out this link).
As we can see In webkit browser we can see that background image respects padding while centering,
and in (at least Firefox and Opera) things go different.
So, the question is following - what behaviour is actually correct, and, far far more important, how can I unify layout?
UPD: don't waste your time trying to find appropriate rule in notorious css reset sets, since I've already tried )))
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您的问题不是
background-origin而是box-sizing。看起来 webkit 的 box-sizing 是
content-box，而 mozilla 的 box-sizing 是border-box，使得 webkit 的单元格高度为 242px（高度 + 填充 + 边框），而 mozilla 的为 200px。由于您的垂直背景位置居中，因此会创建额外的垂直空间。只需设置box-sizing:border-box即可确保两个现代浏览器之间的一致性。这是一个新的：http://dabblet.com/gist/1621656编辑：
虽然上面修复了 Chrome (webkit)，但它似乎没有修复 Safari 5.1 (webkit)。似乎每个浏览器对表格单元格的 box-sizing 属性的实现都有错误。事实上，如果您查看 MDN 的注释部分，它会显示 < code>box-sizing 甚至没有在 Mozilla 中应用。
因此，我们必须以不同的方式解决你的身高问题。好消息，根据 CSS2.1 规范，我们应该能够从
TR定义我们想要的高度。这是适用于我的 Safari、Chrome 和 Firefox 版本的新功能：http://dabblet.com/gist/1622122You're problem isn't the
background-originit's thebox-sizing.Looks like webkit's box-sizing is
content-boxand mozilla's isborder-boxmaking webkit's cell-height 242px (height + padding + border) and mozilla's 200px. And since your vertical background position is centered, it's creating extra vertical space. Simply setbox-sizing:border-boxfor consistency between the two modern browsers.Here's a new one: http://dabblet.com/gist/1621656EDIT:
While the above fixes Chrome (webkit), it does not seem to fix Safari 5.1 (webkit). It appears that each browser has a buggy implementations of the box-sizing property for table-cells. In fact, if you even look at the Notes section of the MDN it says
box-sizingisn't even applied in Mozilla.Therefore, we must solve your height issue a different way. Good news, according to the CSS2.1 Spec we should be able to define the height we want from the
TR. Here's a new that works in my Safari, Chrome and Firefox versions: http://dabblet.com/gist/1622122