CSS3 的浏览器兼容性问题答案

【问题标题】：Browser compatibility issues with CSS3CSS3 的浏览器兼容性问题
【发布时间】：2012-11-15 03:20:06
【问题描述】：

我使用一些 CSS3 设计了一些网页。它在 Google Chrome 中看起来不错，但在 Internet Explorer 中样式变得笨拙。关于这些，我有两个问题：

我可以这样做吗：我可以制作两个样式表并根据用户的浏览器加载适当的版本。让我说得更清楚：

if browser is Internet Explorer
    use stylesheet1.css
else
    use stylesheet2.css

我的主要问题是border-radius 属性的使用。有没有办法直接避免这种情况。

【问题讨论】：

我们说的是哪个版本的 IE？
如果不确定，请打开 IE，按 CTRL+H，然后单击“关于 Internet Explorer”。

标签： javascript jquery html css

【解决方案1】：

在您的 HTML/标题中执行以下操作：

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

你也可以进一步分解：

<!--[if IE 7 ]>     
 <link rel = "stylesheet" type = "text/css" href = "ie7-css.css" />
<![endif]-->

或许多其他组合：

<!--[if IE 7 ]>
<!--[if lt IE 7]>     <--- less than IE7
<!--[if gt IE 7]>     <--- greater than IE7
<!--[if IE 8 ]>
<!--[if IE 9 ]>
<!--[if !IE]>

HTML5 Boilerplate 的建议（和使用的条件）：

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

【讨论】：

另一个样式表呢。我该如何使用它？？
在我发布前一秒就发布了。好决定。 +1
只需像往常一样添加适用于 chrome 和 FF 的 css，并且只有在用户使用 IE 时才会包含来自@nickhar 的代码
谢谢.. 但我的意思是其他浏览器，如 Chrome、Mozilla、Safari 等，我将它们的样式表放在哪里。他们的条件是什么？？
其他浏览器不需要条件。有一个包含所有浏览器的基本样式表，并且 IE 仅覆盖 IE。

【解决方案2】：

你可以这样做

在onload中调用函数

function something()
{
nav=navigator.userAgent;
if (nav.indexOf("IE 8.0")!=-1)
{    

    var $ = document; 
    var cssId = 'myCss';  // you could encode the css path itself to generate id..
    if (!$.getElementById(cssId))
    {
        var head  = $.getElementsByTagName('head')[0];
        var link  = $.createElement('link');
        link.id   = cssId;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = 'css/cssyouwant.css';
        link.media = 'all';
        head.appendChild(link);
    }
}
}

navigtor.userAgent 显示您的浏览器名称。

【讨论】：

【解决方案3】：

您可以通过拥有 2 个不同的 css 文件来解决这些问题。阅读他对整个跨浏览问题的解决方案：

Emulating CSS3 border-radius and box-shadow in IE7/8

【讨论】：

【解决方案4】：

Yes, you can! 这些被称为条件 cmets，并且完全符合您的要求。

<link relblablabla />

<!--[if lt IE9]>
    <link relblablabla />
<![endif]-->

当且仅当您使用的 Internet Explorer 版本低于 IE9 时，上述示例将加载备用的第二个样式表。查看上面的链接以获取更多示例。

【讨论】：