0

background-imageミキシングとbackground-colordivホルダーに関連する小さな問題があります。

div は次のようになります。

<div class="board_position" x="1"  y="1"></div>

CSS は次のとおりです。

.board_position {
width:25px;
height:25px;
margin:1px 0 0 1px;
float:left;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

background: #f4f4f4; /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIzJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f4f4f4 0%, #ffffff 23%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(23%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f4f4f4 0%,#ffffff 23%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f4f4f4 0%,#ffffff 23%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f4f4f4 0%,#ffffff 23%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f4f4f4 0%,#ffffff 23%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

このboard_positionクラスは、グラデーションの背景色で丸みを帯びたボックスを描画します。

そのクラスの一部の div には、その div に別のクラスを追加することによって提供する追加のプロパティがあります。この追加クラスは次のbackground-imageとおりです。

<div class="board_position bg" x="3"  y="1"></div>
.bg { background-image:url(/img/bg.png); }

Chrome、Firefox、Safari、Opera では正常に動作します。

しかし、IE では、結果は四角いボックス (丸められていない) であり、board_position別のクラスで追加のプロパティが追加された div では、画像が の下にあるように見えるため、読み込まれた画像は表示されませんbackground-color。

この問題の解決策はありますか?

4

3 に答える 3

0

IE のどのバージョンですか? 境界線の半径などの CSS 3 属性は、古いバージョンの IE では機能せず、角が直角になります。第二に、css セレクター .bg と .border_position には同じ重要なルールがあるため、css の最後のものが勝つので、最初に bg をリストしてから board_position をリストすると、ボードの位置が勝ちます。.bg が勝つようにするには、.board_position.bg のようなセレクターにさらに追加します。これは 020 の重要度を持ち、bkg は 010 の値を持つ .board_position を無効にします。

于 2012-08-28T18:16:26.797 に答える
0

IE8以下は角丸に対応していません。

http://css3pie.com/を使用してみてください

http://css3pie.com/documentation/known-issues/の修正を忘れずに使用してください。

于 2012-08-28T18:16:40.553 に答える
0

IE8 は丸みを帯びた境界線をサポートしていません。もう 1 つの問題については、画像のパスは、リンク先のファイルではなく、CSS ファイルに対して相対的であることを覚えておいてください。

于 2012-08-28T18:17:34.920 に答える