0

サイドバーのタイトル用に持っている2つのリボンは、どの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 ドキュメント モードをエミュレートしています。box-shadow は IE9 未満ではサポートされていないため、このようなことを行うメリットはないと思います。以下を使用する必要があります。

<meta http-equiv="X-UA Compatible" content="IE=edge, chrome=1">IE の最新バージョンが何があっても使用されるようにし、ユーザーがクロム フレームをインストールしている場合はネイティブ IE の代わりにそれが使用されるようにします。

于 2013-03-06T17:25:28.953 に答える