CSS3的浏览器兼容性问题

Question

I designed a few web pages using some CSS3. 我使用一些CSS3设计了一些网页。 It looks good in Google Chrome, but the styles become clumsy in Internet Explorer. 在Google Chrome浏览器中看起来不错，但是在Internet Explorer中，样式变得笨拙。 I have two questions regarding these: 关于这些我有两个问题：

Can I do something like this : I can make two style sheets and depending the browser of the user load the appropriate version. 我可以这样做吗：我可以制作两个样式表，并根据用户的浏览器加载适当的版本。 Let me make it more clear: 让我说得更清楚：

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

My main problem is with the usage of border-radius property. 我的主要问题是使用border-radius属性。 Is there some way to avoid this directly. 有什么办法可以直接避免这种情况。

Answer 1

In your HTML/header do the following: 在您的HTML /标题中，执行以下操作：

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

You can also break it down further: 您还可以进一步分解：

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

Or many other combinations: 或许多其他组合：

<!--[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]>

The recommendation (and conditionals used) by HTML5 Boilerplate : 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! 是的你可以！ These are called conditional comments, and do exactly what you are looking for. 这些称为条件注释，它们完全可以满足您的需求。

<link relblablabla />

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

The above example will load the alternative, second stylesheet if, and only if, the Internet Explorer version you are using is less than IE9. 仅当您使用的Internet Explorer版本低于IE9时，以上示例才会加载第二个替代样式表。 Check out the link above for more examples. 查看上面的链接以获取更多示例。

Answer 3

You can fix these kinds of things by having 2 different css files. 您可以通过拥有2个不同的CSS文件来解决这些问题。 read his solution on the whole cross-browsing issue: 阅读有关整个跨浏览器问题的解决方案：

Emulating CSS3 border-radius and box-shadow in IE7/8 在IE7 / 8中模拟CSS3边界半径和框阴影

Answer 4

You can do like this 你可以这样

call a function in onload 在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 shows your browser name. navigtor.userAgent显示您的浏览器名称。

CSS3的浏览器兼容性问题

问题描述

4 个解决方案

解决方案1
6 已采纳 2012-11-27 13:35:24

解决方案2
2 2012-11-27 13:36:52

解决方案3
2 2012-11-27 13:37:20

解决方案4
2 2012-11-27 13:37:40

CSS3的浏览器兼容性问题

问题描述

4 个解决方案

解决方案1 6 已采纳 2012-11-27 13:35:24

解决方案2 2 2012-11-27 13:36:52

解决方案3 2 2012-11-27 13:37:20

解决方案4 2 2012-11-27 13:37:40

解决方案1
6 已采纳 2012-11-27 13:35:24

解决方案2
2 2012-11-27 13:36:52

解决方案3
2 2012-11-27 13:37:20

解决方案4
2 2012-11-27 13:37:40