0

我在侧边栏中用于标题的两个功能区没有在任何 IE 版本中正确显示。赋予它环绕外观的右下翻盖没有出现。这几乎就像 IE 不喜欢 CSS 之前和之后的东西。

链接 http://tshirthideout.spreadshirt.com/

HTML

<div class="ribbon"><strong>SPECIAL OFFERS</strong></div>

CSS

.ribbon {
  padding-bottom: 7px;
  padding-top: 8px;
  padding-left: 3px;
  color: #fff;
  text-shadow: 1px 1px 0px #c1c1c1;
  font-size: 15px;font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
  letter-spacing: 5px;
  position:relative;
  width:267px;
  right:0px;
  top:19px;
  background-color:#212121;
  -moz-border-radius:2px 0px 0px 2px;  /*radius of 2px*/
  -khtml-border-radius:2px 0px 0px 2px;
  -webkit-border-radius:2px 0px 0px 2px;
  -webkit-box-shadow: -2px 2px 4px rgba(50, 50, 50, 0.35);
  -moz-box-shadow:    -2px 2px 4px rgba(50, 50, 50, 0.35);
  box-shadow:         -2px 2px 4px rgba(50, 50, 50, 0.35);
}

.ribbon:after {
  content:'';
  width:0;
  height:0;
  border-color: #000 transparent transparent #000;
  border-style:solid;
  border-width:5px 5px;  
  position:absolute;
  right:0;
  bottom:-10px;
}

此代码适用于其他主要浏览器，但不适用于 IE。

4

1 回答 1

2

那么元标记：<meta http-equiv="X-UA Compatible" content="IE=EmulateIE7">正在为 IE 9 + 8 用户模拟 IE 7 文档模式。我认为在 IE9 下不支持 box-shadow 之类的操作没有任何优势。你应该使用：

<meta http-equiv="X-UA Compatible" content="IE=edge, chrome=1">这样无论如何都使用最新版本的 IE，并且如果用户安装了 chrome 框架，它将被使用而不是原生 IE。

于 2013-03-06T17:25:28.953 回答