css - 应该居中背景尊重填充

Question

Here is片段(如果您使用的是 Opera，请查看 this 链接)。正如我们所见，在 webkit 浏览器中，我们可以看到背景图像在居中时遵循填充，在(至少 Firefox 和 Opera)中，情况有所不同。

因此，接下来的问题是 - 什么行为才是真正正确的，更重要的是，我如何统一布局？

UPD:不要浪费时间在臭名昭著的 css 重置集中寻找合适的规则，因为我已经尝试过了)))

Answer 1

你的问题不是background-origin这是 box-sizing .

看起来 webkit 的 box-sizing 是 content-box mozilla 的是 border-box使 webkit 的单元格高度为 242px(高度 + 填充 + 边框)和 mozilla 的 200px。由于您的垂直背景位置居中，因此会产生额外的垂直空间。只需设置 box-sizing:border-box 以确保两种现代浏览器之间的一致性。

这是一个新的: http://dabblet.com/gist/1621656

编辑:虽然上面修复了 Chrome (webkit)，但它似乎没有修复 Safari 5.1 (webkit)。似乎每个浏览器都有一个 table-cells 的 box-sizing 属性的错误实现。事实上，如果您甚至查看 MDN 的注释部分它说 box-sizing甚至没有在 Mozilla 中应用。

因此，我们必须以不同的方式解决您的高度问题。好消息，据 CSS2.1 Spec我们应该能够从 TR 定义我们想要的高度.这是适用于我的 Safari、Chrome 和 Firefox 版本的新功能: http://dabblet.com/gist/1622122