内の任意のテキストなしで以下のスパンが表示されません背景画像は、私が内部テキストXXX背景画像は、spanタグ
<span style='background-image:url("http://gifsoup.com/web/images/soc4.gif")' style="height: 30px;">
xxx
</span>
を削除した場合、それは内XXXなしで動作がしません互換モード。
どのように内部のテキストなしで動作させるには？
スパンは、デフォルトでは、幅または高さを持たないインライン要素になります。あなたはスパンの幅と高さを設定することができますインラインブロックにインラインの表示を変更することにより
span {
display:inline-block;
width:30px;
background-image:url("http://gifsoup.com/web/images/soc4.gif");
height:30px;
}
：にCSSを変更します。
幅を追加する必要があります。display:inline-blockを行う必要があります。それ以外の場合は幅が0なので、表示されません。
私はそれを試しましたが、助けにはなりませんでした。 – Foo
スパン要素はインライン要素であり、幅や高さはありません。要素cssにブロックまたはインラインブロックとして表示する必要があることを指定し、次に画像の幅と高さを指定する必要があります。
span{
display: inline-block;
background-image:url("http://gifsoup.com/web/images/soc4.gif");
width:30px;
height:30px;
border-radius: 5px;
}
のhtmlでの引用のスタイルを混在させないでください、あなたはあなたのインラインCSSでの単一引用符（ '）を使用し、スタイル値のための二重引用符（ "）を維持することができます。実際にインラインスタイルを使用していません – zamnuts
この要素の周りの文脈によっては、divが適切かもしれません。 – Brandon