0

Internet Explorer で自分のサイトを表示する際に問題が発生しています。次の CSS/HTML では、画像はアウトライン化され、半径が湾曲し、収まるようにスケーリングされます。ただし、IE 8 では、画像の拡大縮小、角の湾曲、輪郭の表示は行われません。jsfiddle は次のとおりです: http://jsfiddle.net/pave4/ このページは最新の IE (IE8) で問題ありませんが、古いバージョンの IE でも動作することを確認する必要があります。

HTML:

<ul>
<li>
    <a href="/aboutme/">
    <span class="img-outline"><span class="page-img" id="aboutme"></span></span>
    <span class="page-title">About Me</span>
    </a>
</li>
</ul>

CSS:

.page-title {
      text-align: center;
      display:block;
      text-decoration: none;
}

.img-outline {
  height: 100%;
  background: rgba(0, 0, 0, .3);
  padding: 5px;

  display: block;   
  margin-left: auto;   
  margin-right: auto;

  -webkit-border-radius: 18%;
  -moz-border-radius: 18%;
  border-radius: 18%;
}

.page-img {
  height: 100%;
  background: rgba(50, 50, 50, 1);
  background-size:115px 115px;
  background-repeat:no-repeat;

  display: block;   
  margin-left: auto;   
  margin-right: auto;

  -webkit-border-radius: 15%;
  -moz-border-radius: 15%;
  border-radius: 15%;
}

li,
li.current,
li.current:visited {
    margin-left: 1px;
    margin-right: 1px;
    width: 118px;
    height: 112px;
    display: block;
    float: left;
    position: relative;
    opacity: .6;
}

li:hover { opacity: 1; }

li .img-outline {
  width: 70px;
  height: 70px;
}

li .page-img {
    background-size:70px 70px;
}

li #aboutme {
    background-color: rgb(36, 112, 245);
    background-image: url('http://www.rasnickjewelry.com/images/uploads/900_Animals_300/901_Elephant_Head_Ring_side_R300.jpg');
}

</p>

4

3 に答える 3

4

IE8 がサポートしていない多くの CSS3 属性を使用しています。

于 2012-07-25T23:13:03.557 に答える
1

元の質問へのコメントで述べたように、IE 8 までは rgba 色をサポートしていませんでした。アルファ チャネルを使用しないため、background-color: #323232;代わりに使用します。

IE8 も標準プロパティをサポートしていません。代わりopacityに必要ですfilter: alpha(opacity=60);(パーカンテージ値は % ではありません)。関連する可能性があるのは、IE の要素がlayout正しくレンダリングされる必要があることです。このトピックをカバーする記事はたくさんあります。良いものはOn having Layoutです。

どのような CSS プロパティと機能がサポートされているかを把握するには、 When Can I UseやQuirksmodeなどのリソースを使用してください。

于 2012-07-27T08:49:17.683 に答える
0

スタイルを使用して画像のサイズを変更しないでください。正確なサイズでアップロードすると、読み込み時間が節約されます。

ボーダー半径のような他のスタイルについては、このツールを使用してみてください http://css3pie.com/

于 2012-07-25T23:23:01.613 に答える