css - 在 Firefox 中运行良好的网页在 Chrome 中显示了一些样式问题

Question

我是网络开发的新手，在特定浏览器相关的 css 兼容性问题上。

我的主页中有以下 css，它在 Firefox 中运行良好，当我使用 firebug 检查元素时，我可以看到 css 属性。但是当我使用 chrome 时，相同的 css 规则丢失了。当我检查时，我什至看不到 chrome 中的规则。我想知道为什么会这样。我知道一些 css 规则依赖于浏览器。但是现在我真的很困惑我该如何解决这个问题。

请引用这个link查看我的 CSS 规则。

有关发生这种情况的原因和方式的任何建议。任何有用的链接也将不胜感激。提前致谢。

Answer 1

尝试使用媒体查询，只选择特定于 webkit 的内容，例如:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Your CSS */
}

此查询检查 webkit 中的设备像素比率。 Safari 和 Chrome 是唯一使用 webkit 的大型浏览器，因此这不会影响 FireFox 或 IE。