【发布时间】：2010-10-13 00:06:43
【问题描述】：
有没有办法在 *.css 文件中执行特定于浏览器的条件 CSS？我想在同一个物理文件中定义所有样式。
【问题讨论】：
-
如果您使用 hack 专门针对浏览器（即使您没有检查用户代理），当浏览器最终修复您正在解决的问题时，您的代码可能会中断或产生不良影响.相反，请尝试找到一种更标准化的方法来解决问题，或者研究一下它是否是浏览器错误。
标签： css cross-browser
【发布时间】：2010-10-13 00:06:43
【问题描述】：
不确定有什么方法可以做到这一点。我们只是在代码隐藏中根据用户浏览器设置了 CSS 文件。
【讨论】：
只能通过黑客手段。条件 cmets 只为标记文件定义，而不是 .CSS 文件。
【讨论】：
有一种方法可以在 IE 中利用浏览器中的错误和 @import 来实现。我见过的最好的方法是 here，由 bobince 提供（并且绝对击败了我的答案，呵呵）。
但总的来说，没有。甚至条件 cmets 也是特定于 IE 的浏览器。
【讨论】：
没有。使用 CSS 文件的全部目的是每个文件代表特定的样式。如果你想写脚本，你应该使用 PHP 之类的，CSS 只是对单一样式的描述。
【讨论】：
有多个 hack（以 somewhat outdated table 为例）
还有基于服务器端的解决方案，例如 php 的 conditional-css
但是写得好，结构良好的 css 应该不需要那么多 hack，只需要偶尔的 ie 修复。
【讨论】：
您可以使用这个巧妙的 javascript 文件，CSS 浏览器选择器：http://rafael.adm.br/css_browser_selector/
它允许您通过使用类名来定位特定浏览器，例如：
.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
【讨论】：
我认为没有比上面提到的 Rafael Lima 更好的 CSS 浏览器选择器，所以我不会在此处添加链接或同一篇文章中的示例，这些示例取自 Rafael Lima 的页面。
需要注意的是，它只能在 CSS 选择器之外使用，并且不针对特定的 CSS 行，但它比标准方法更健壮且更易于阅读。
【讨论】：
-
这应该是一条评论
我一直在为许多，尤其是最近的浏览器（大多数版本的 Firefox、Webkit 和 Internet Explorer 版本）进行这项工作。最近，Safari 和 Chrome 的版本能够分开。其中一些我已经放在 browserhacks.com 上
最好先从你能做的最好的 CSS 开始，但是当你的时间很短并且需要一些东西时……昨天。
目前作为参考，Internet Explorer 是第 11 版，Safari 是第 8 版，Firefox 在开发/Aurora 版本中最多为 36，Chrome 在开发/金丝雀版本中最多为 41。
这些非常具体，如果通过移除任何部分对其进行更改，它们将无法正常工作。
针对任何版本的 Firefox [不在 iOS 上！见下文]：
/* Firefox (any) */
_:-moz-tree-row(hover), .selector { color:red; }
检测新版本的 Chrome：
（这不适用于 iOS 上的 Chrome ！！！——开发人员在 iPad 和 iPhone 上使用了 Safari 引擎，而不是 Chromium 或 Mozilla——所以你使用 Safari hack 来代替这些浏览器的 iOS 版本）
/* Chrome 29 and newer */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
.selector { color:red; }
}
如果你想这样做，你也可以使用我制定的组合 hack 将 Chrome 定位在更远的地方（这是奇怪的 CSS，但它有效 - 完全按照你在此处看到的复制它）：
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.selector {-chrome-:only(;
color:red;
);}
}
要检测新版本的 Safari 与 Chrome 一样难以解决，这个使用了一对嵌套的媒体查询：
/* Safari 6.1-10.0 */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.selector { color:red; }
}}
Safari 于 2017 年 3 月下旬更新，因此适用于 10.1：
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm)
{ @media {
.selector { color:red; }
}}
对于版本（7.1 及更高版本），您可以使用这个：
/* Safari 7.1+ (10.1 is the current version as of April 2017) */
_::-webkit-full-page-media, _:future, :root .selector { color:red; }
针对较新版本的 Internet Explorer：
/* Internet Explorer 11 */
_:-ms-fullscreen, :root .selector { color:red; }
/* Internet Explorer 10+ AND Microsoft Edge */
_:-ms-lang(x), .selector { color:red; }
/* Internet Explorer 9-11 */
_::selection, .selector { color:red\0; }
/* Microsoft's Edge Browser */
@supports (-ms-ime-align:auto) { .selector { color:red; } }
这些是基础知识，但要查看我针对许多不同浏览器版本的更多创作，请参阅我的博客：
https://jeffclayton.wordpress.com
或我的实时 CSS hack 测试页面：
https://browserstrangeness.bitbucket.io/css_hacks.html 镜子： https://browserstrangeness.github.io/css_hacks.html
享受吧！
【讨论】：