Question

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

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

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

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

Answer 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]-->

Answer 2

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

<link relblablabla />

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

上面的示例将加载替代的第二个样式表，当且仅当您使用的Internet Explorer版本小于IE9时。有关更多示例，请查看上面的链接。

Answer 3

你可以通过拥有2个不同的css文件来解决这些问题。在整个交叉浏览问题上阅读他的解决方案：

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

Answer 4

你可以这样做

在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显示您的浏览器名称。

CSS3的浏览器兼容性问题

4 个答案: