1

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

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

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

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

4

4 回答 4

6

在您的 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]-->
于 2012-11-27T13:35:24.197 回答
2

是的你可以！这些被称为条件注释，并且完全符合您的要求。

<link relblablabla />

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

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

于 2012-11-27T13:36:52.853 回答
2

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

在 IE7/8 中模拟 CSS3 边框半径和框阴影

于 2012-11-27T13:37:20.967 回答
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 显示您的浏览器名称。

于 2012-11-27T13:37:40.980 回答