1

ソーシャルメディアアイコンを含むリストを試しています。n番目の子を使用したかったのですが、IEはサポートされていないため、以下の方法を使用しています。私は動作しませんが、何か提案があります-アイコンが表示されませんか？

ul.socialmedia {
color: #000000;
margin:0;
padding:0;
}

li.fb {
background:url('images/Facebook_icon.png') 50%    50% no-repeat no-repeat;
padding-left: 10px;
}

li.gp {
background:url('images/googleplus_icon.png') 50% 50% no-repeat no-repeat;
padding-left: 10px;
}

li.tw {
background:url('images/twitter-icon.png') 50% 50%  no-repeat no-repeat;
padding-left: 10px;
}

HTML：

<ul class="socialmedia">
<li class="fb"><strong>FACEBOOK</strong></li>
<li class="gp"><strong>GOOGLE+</strong></li>
<li class="tw"><strong>TWITTER</strong></li>
</ul>

すべての画像が機能し、テストされています

4

1 に答える 1

0

まずbackground-repeat、無効なCSSであるプロパティを2回指定しますが、これらのプロパティは無視され、削除するのが最善です。

問題はbackground-position値にある可能性があります..幅を指定していないため<ul>（ブロック要素、デフォルトでは使用可能なすべての幅を占める）、50％を使用して50％はbg-imageをビューポートの幅の半分に配置していますつまり<ul>、技術的にはそうではありませんが、外部に表示されます。<ul>背景画像がビューポート全体ではなく、その固定コンテナを基準にするように、固定幅を指定します。

于 2013-03-09T18:15:00.350 に答える