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

Question

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

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

请参阅此链接以查看我的 css 规则。

关于为什么以及如何发生这种情况的任何建议。任何有用的链接也将不胜感激。提前致谢。

Answer 1

尝试使用媒体查询，只选择 webkit 特定的东西，例如：

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

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