CSS webkit高度

Question

我的div框有问题，必须得到一个特定的高度：241px。 在所有浏览器中它都显示正确，但在chrome和safari中它只有230px高度

是否有可能，每个示例都有一个css hack只能在webkit浏览器中修改此框？

Answer 1

通过将CSS规则放在引用webkit特定属性的媒体查询中，可以仅在基于webkit的浏览器上应用CSS规则：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* webkit specific CSS */
    div#mydiv { height:241px; }
}

Answer 2

如果您的问题源于盒子尺寸设置，我很好奇。

原因可能是我提供了这个答案，因为thirtydot指出接受的答案并没有帮助你理解你为什么会遇到这个问题。

对我来说，chrome不会显示box-sizing：padding-box所以我不得不使用border-box，除了旁边排列的元素如果依赖于高度，它们的渲染效果不一样。这是因为使用填充框的mozilla的最终高度将比设置为边框的chrome中的元素短两个像素。

解决方案是使元素保持一致。所以我需要把我的另一个元素（我要排队的那个）分别用到border-box和padding-box。我可以尝试通过使用你的答案来判断它有不同的高度取决于浏览器，但我认为这不是最好的主意。

-webkit-box-sizing: padding-box;
-moz-box-sizing: padding-box;
box-sizing: border-box;