使用 IE 的标准边框属性覆盖 CSS 框阴影



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;
}

没有帮助。

为 IE 制作一个单独的 CSS,例如 ie.css 并将其链接到您的 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中。

它应该有效。我做了很多次。

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的框阴影和边框半径。IE9支持它们,对于IE8及更早版本,它们只是降级为没有阴影和矩形。


注意

在大尺寸的元素上使用box-shadow时要小心。border-radius也是如此。

最新更新