Question

我在侧边栏中为标题设置的两条色带不会显示在任何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。

Answer 1

元标记：<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。

css色带在IE中无法显示

1 个答案: