2

アイコンを保持するためのスパンが入ったAタグボタンがあります。すべてのブラウザでうまく機能します。float：rightを適用してスパンを右側にシフトすると、IE7を除くすべてのブラウザー（Firefox、IE8 +など）でも正常に機能します（わかっていますが、修正する必要があります）。

 <a href="#"><span>&nbsp;</span>Link</a>

したがって、スパンが左にフロートしている場合、IE7は正常に動作します。ただし、右に浮くと、Aタグコンテナが100％伸びます。

HTMLの構造を変更したくありません。つまり、IE7のみを処理するために別のスパンを挿入したり、テキストの右側にSPANを移動したりしたくありませんが、CSSで修正したいのですが、試したものはまだうまくいきませんでした。

テストケース： http： //jsfiddle.net/QeQSQ/1/（スパンが左側にある場合、IE7は正常に動作します）

テストケース： http： //jsfiddle.net/QeQSQ/2/（SPANが右側にあり、コンテナーが伸びているため、IE7は機能しません）

4

2 に答える 2

0

代わりに絶対に配置します（例）：

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
    position:relative;
    padding-right:1em;
}
a span{
    position:absolute;
    right:0;
    display:block;
    height:14px;
    width:15px;

}

:beforeまたは、別の[より良い]解決策は、文字を介して:after疑似要素を追加することです（例）：

<a href="#" class="site">Link</a>
<a href="#" class="account">Link</a>

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
}
a.site:before {
    content:"» ";
}
a.account:after {
    content:" »";
}

注：これはIE7ではまったく機能しません（追加のテキストは表示されません）が、バグも発生しません。

于 2012-07-19T14:35:26.783 に答える
0

float：leftを削除し、代わりに、ie7の回避策を使用してスパン表示をインラインブロックにします。

a{
    display:inline-block;
    border:1px solid red;
    height:auto;
    width:auto;
    padding:5px;
}


a span{   
    display:inline-block;
    zoom:1; 
    *display: inline;
    height:14px;
    width:15px;    
}​

ここで更新されたフィドル：http：//jsfiddle.net/QeQSQ/5/

ie7インラインブロックの回避策に関する記事：http：//flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html

于 2012-07-19T14:41:20.123 に答える