0

私たちが解決しようとしている問題は、テキストが a の末尾を超えてオーバーフローすることです<p>。これは、パディング<a>のある絶対位置要素を含む相対位置要素を含むコンテンツの結果のようです。<span>通常どおり、Firefox はテキストをラップします。

これが私のHTMLの抽象化です：

<p>
    In this second example, 
    <a href="#">
        <span class="icon"><img src="play.gif"></span>
        mo
    </a> 
    muh...
</p>

そして、CSS の抽象化は、私がまだ理にかなっていると思うほど単純化されています。

a {
    padding: 5px;
}
a span.icon {
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
}

問題のスクリーンショットを次に示します (強調表示されているのは、要素が強調表示された Chrome の要素インスペクター<p>です)。immediatelyの最後にオーバーフローしている単語が表示され<p>ます。

正しい方向へのポインタは高く評価されます。

4

1 に答える 1

1

絶対配置を使用する代わりに、display:inlineorを使用してみてくださいdisplay:inline-block(高さ/幅を設定する必要がある場合 - 注: IE 7 以前ではサポートされていません)。

display画像とスパンは最初からインラインであるため、すべてを一緒に削除できます。スパンを削除し、画像と周囲のリンクをスタイリングするだけの例をここに示します。

ボタンの背景として画像を使用し、スペースを考慮してパディングを設定することもできます。例：

.button{
  background: url(img/buttonIcon.png) no-repeat; /* 15x15 icon */
  padding: 0 0 0 15px;
}

例

于 2013-01-14T16:28:16.163 に答える