css - 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

我很好奇您的问题是否源于盒子尺寸设置。

可能是因为这个原因我提供了这个答案，并且因为三十多点指出接受的答案并不能帮助你理解你为什么会遇到这个问题。

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

解决方案是使元素保持一致。所以我需要使用我的另一个元素（我想要排列的那个）并使其分别使用边框框和填充框。我可以尝试通过使用您的答案来告诉它根据浏览器具有不同的高度，但我认为这不是最好的主意。

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