为特定浏览器使用不同的 CSS 样式答案

【问题标题】：Using different CSS styling for specific browsers为特定浏览器使用不同的 CSS 样式
【发布时间】：2012-11-25 21:39:15
【问题描述】：

为 IE 和其他浏览器设置单独的 CSS 的最佳方式是什么？我正在考虑只针对 IE、Firefox 和 Safari 用户。尤其是现在除了 IE 之外的大多数浏览器都支持 CSS3。

我遇到的各种方法是

加载单独的样式表有条件地使用<!--[if IE]>
下划线破解和各种其他内联 IE 破解

我更喜欢 (2)，因为 (1) 是额外的工作，尤其是在开发时。但是（2）似乎并不总是有效。最有效的方法是什么？

【问题讨论】：

除了解决浏览器错误之外，您是否以任何原因针对特定浏览器？
我的目标是支持 CSS3 和不支持 CSS3 的浏览器
没有支持所有 CSS 3 的浏览器，Internet Explorer 和 Firefox 都支持部分 CSS 3。（对于 CSS 3 的定义，您可以给出其当前状态）

标签： css cross-browser

【解决方案1】：

我会拥有一个样式表，所有内容都可以放在文档的顶部。

在下面做你的 [!--[如果 IE]] 条件样式表。

这里只是覆盖在 IE 中导致问题的样式。 - 选择的特定类的最后一种样式是将要遵循的样式。

【讨论】：

这正是我所做的，因为我讨厌弄乱我的符合标准的样式表来破解 ie 的修复程序。
谢谢。这对我有用。 :)

【解决方案2】：

我们的团队按照以下三个规则处理 CSS：

确保通用/通用 CSS 文件在尽可能靠近所有浏览器的情况下正常工作。
在单独的文件中处理所有 IE“错误”，使用 IE 条件控制加载样式表。
除非按照前两条规则无法使其正常工作，否则不允许进行黑客攻击。

【讨论】：

【解决方案3】：

我同意将所有核心 CSS 保存在一个文件中。如果您使用的是 ASP.NET，那么您可以使用 WebHandler 来管理实际发送的 CSS。我确信其他语言也有类似的解决方案。这允许您只发送您需要的内容并允许它被缓存。另一个好处是您可以组合多个 css 文件（如果您这样做的话）并只显示一个。这是一种很好的做法，因为您可以减少对 Web 服务器的请求数。

然后你可以写类似 [if lt IE 8] margin: 0px;并且不会发送到 IE8 或 FF 等。

如果您只是使用 HTML，那么您必须使用上面提到的 [!--[if IE]] 样式条件。

我们在我们非常大的项目中使用 WebHandler，我永远不会这样做。

见http://www.conditional-css.com/download。它适用于 PHP、C# 和 C

祝你好运。

【讨论】：

【解决方案4】：

<!--[if !IE]><!--><link rel="stylesheet" href="non-ie.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" href="ie.css"><![endif]-->

这个技巧广泛使用 Yandex（又名“俄罗斯谷歌”）来减少 HTTP 请求。以market.yandex.ru 为例。

【讨论】：

【解决方案5】：

你也可以使用这种方式；有时在我们需要在代码中间写样式的地方条件可能不适用。

<?php $browser = $_SERVER['HTTP_USER_AGENT']; ?>  
    <?php if (strstr($browser, "MSIE 6.0")) { ?>  
    <link rel="stylesheet" href="ie6style.css" type="text/css" media="screen" />  
    <?php }else{ ?>  
    <link rel="stylesheet" href="default.css" type="text/css" media="screen" />  
    <?php } ?>

检查$browser ：

IE – “MSIE”

火狐——“火狐”

Safari——“Safari”

歌剧——“歌剧”

铬——“铬”

【讨论】：

只有在他使用PHP时才有效