Question

所有浏览器的

css：

.bordering {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: #A3815B 0px 1px 3px;
    -moz-box-shadow: #A3815B 0px 1px 3px;
    box-shadow: #A3815B 0px 1px 3px;
}

IE的

css：

.bordering {
    border: 1px solid #A3815B;
}

从所有浏览器的css中删除.bordering类时，IE中的边框正常。

该怎么办，box-shadow适用于FF,Opera，其他border适用于IE。

尝试：

.bordering {
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

没有帮助。

Answer 1

为ie.css制作一个单独的IE浏览器，并将其链接到您的HTML页面：

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

只有在检测到IE时才会包含您的CSS。

之后，将.bordering CSS放入style.css（适用于所有浏览器）并将border: xxx仅放入ie.css。

它应该工作。我做了很多次。

Answer 2

在HTML标记中使用条件注释放置ie类，如此

<!--[if IE]><html class="ie"><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

（您可能需要阅读http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/）

然后像这样设置IE的样式：

.ie .bordering {
    /* your styles for IE */
}

但是，我不明白你为什么要压制IE的box-shadow和border-radius。 IE9支持它们，它们只会降级为IE8及更旧的阴影和矩形。

请注意

Be careful with using box-shadow on elements with large dimensions。同样适用于border-radius。

使用IE的标准边框属性覆盖CSS box-shadow

2 个答案: