1

プロジェクトで jQuery UI ボタン​​を使用しましたが、正常に動作しています。

しかし、IE7 では、アイコンが本来のように浮きません。IE ではまだ角丸がサポートされていませんが、問題ありません。

良いブラウザ一部のブラウザは正常にレンダリングされます

良い例え

IEはバージョン 7 を吸う:

悪い例

HTMLのボタンから始めます

<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span>Send</button>

次に、ボタンごとにこの小さな jQuery を使用して、ボタンをループします。

$('#content button').each(function() {                
    var icon = $(this).find('span.ui-icon');
    var primaryIcon = icon.attr('class').replace(/ui-icon\s?/, '');
    icon.remove();
    $(this).button({ icons: {primary: primaryIcon }, label: $(this).text() });
});

私は彼らに電話button()しただけでしたが、ライブラリを設計どおりに使用していることを確認するために、これを行うことにしました。

アイコンにもCSSがありました

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 0.1em;
}

上記のページもございます。（HTTPリファラーを無効にするために短縮されていることを願っています）。

私は何を間違っていますか？

どうもありがとう！

アップデート

Meder's answerに従って、アイコンをインライン ブロック要素として作成してみました。

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 0.1em;
    margin-top: -1px;
    /* get rid of margin for inline element */
    #margin: auto; 
    /* this should revert the element to inline as per declaration above */
    #float: none; 
    /* hasLayout = true */ 
    #zoom: 1;
}

ただし、これには、ボタン要素を非表示にするという異常な効果があります。

ディスプレイ付きIE7：アイコン上のインラインブロック

どうしよう？

4

5 に答える 5

1

とにかく、要素をフロートさせると、それはブロックボックスになります。Display：inlineは役に立たない。また、フロートアイテムには常に幅を設定する必要があります。

于 2010-10-04T07:32:33.463 に答える
1

水平フロートまたはフロート ドロップの幅を明示的に定義する必要があります。別の方法はinline-blockを使用することです。

それでもうまくいかない場合は、お知らせください。

于 2010-10-04T08:03:37.267 に答える
0 
<button type="submit"><span class="ui-icon ui-icon-mail-closed"></span><span style="float:left;">Send</span></button>
于 2010-10-04T07:26:25.480 に答える
0

レンダリングされたhtml、

<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon ui-icon-mail-closed"></span>
    <span class="ui-button-text">Send</span>
</button>

cssを試しましたか？

button span.ui-button-text {
    display: inline;
    float: left;
}
于 2010-10-04T08:00:09.113 に答える
0

試す

button span.ui-icon {
    display: inline;
    float: left;
    margin-right: 2px;
}
button{width:75px;}

IEはボタンの幅が必要だと思います。

これが私のjsfiddleの試みです

于 2010-10-04T08:18:25.333 に答える