有一些 css 技巧可以根据浏览器纠正错误吗？答案

【问题标题】：There is some css trick to correct errors depending on the browser?有一些 css 技巧可以根据浏览器纠正错误吗？
【发布时间】：2014-01-10 15:19:06
【问题描述】：

我想修复 Google Chrome 和 Safari 上显示的 CSS 的一些错误，但 Firefox 和 Opera mobil 显示正确。几年前发现，例如在 ie7.css 中编写一些代码，Internet Explorer 7 读取这些行并可以解决该错误。

现在我遇到了 chrome 和 android 导航器的问题，所以我认为如果可以在 Chrome 上解决该错误，那么该错误将在 Android 平板电脑上修复。

例如我有一行：

.logo-social { position:relative; padding: 10px 0; margin-top:-10px; z-index:500; }

在 Firefox 上，我的社交栏出现在菜单和滑块上方 -10 像素处，在 chrome 上出现在菜单和滑块下方 20 像素处，因此我将 z-index:500; 设置为显示在滑块上方而不是后面。

如果我设置 margin-top:-25px，社交栏将正确显示在 Chrome 上，在 Firefox 下购买看起来不合适。：/

如果有像 IE7 或 IE8 之类的东西需要修复，那就太好了！

【问题讨论】：

从我的角度来看，除了 input[type=text] 或 select 等一些表单元素之外，对于大多数浏览器来说，一个像样的 css 重置和一个有效的编码是完全相同的。你验证你的代码了吗？

【解决方案1】：

使用媒体查询技术

@media screen and (-webkit-min-device-pixel-ratio:0) { 

/* webkit specific rules here */

Body {}

}

这将针对 webkit 浏览器，或者您可以使用 javascript

【讨论】：

【解决方案2】：

CSS 解决方案

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 // your css here for .logo-social
}

注意：但这将包括 Opera，因为它现在也使用 webkit。

Javascript 解决方案

if (navigator.appVersion.indexOf("Chrome/") != -1 || navigator.appVersion.indexOf("Safari/") != -1) {
// modify  
}

确保您在特定浏览器上运行该命令以交叉检查返回的 appVersion

【讨论】：