1

テキストと画像で構成される3つのリンクがあり、IE8互換モードを除いてどこでも機能します。このアプリケーションのユーザーにはIE8互換モードを使用しているため、そのブラウザー環境で動作する必要があると言われています。問題は、画像が次の行にドロップダウンされていることです。

これがどのように見えるべきかです：http： //i.imgur.com/2vAAH.png

IE 8互換モードでの表示は次のとおりです：http： //i.imgur.com/VHtQm.png

画面のコンテキストでは次のようになります：http： //i.imgur.com/FZNxt.png

jsfiddleで問題を再現することができました：http： //jsfiddle.net/dmase05/C6etX/

このサイトはTwitterBootstrapを使用しているので、グリッドとフロートにこれらのクラスのいくつかを使用しています。

これをトラブルシューティングするのが難しいのは、IE8互換モードでIE9でjsfiddleを実行すると問題が発生することですが、IE8互換モードでIE10を実行すると正しいように見えます。 ネイティブのIE8インストールにアクセスできませんが、そこでは問題ないように見えると言われています。

HTMLは次のとおりです（Bootstrap CSSを使用）。

    <div id="divCalendarFooter">
        <div class="row">
             <div class="span3 pull-right">
                <a id="lnkSelectColumns" href="#" role="button" data-toggle="modal" class="pull-right">
               Choose Columns &nbsp;<img src="http://db.tt/cEFFCjw0"/>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="span3 pull-right">
                <a href="#" class="pull-right">
                    Print Calendar &nbsp;<img src="http://db.tt/u94nalQx"/>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="span4 pull-right">
                <a id="aShowPrintByDateRange" href="#" class="pull-right">
                   Print Calendar By Date Range &nbsp;<img src="http://db.tt/u7OxN09k"/>
                </a>
            </div>
        </div>
    </div>​

ありがとうございました

4

1 に答える 1

2

Internet Explorer 8 (IE8 標準モード) の実際のコピーでも同じ問題が発生します。

タグを使用する代わりimgに、CSS を使用して青色のアイコンを背景画像として追加できます。たとえば、CSS は次のようになります。

#divCalendarFooter a {
    padding-right: 36px;
    line-height: 32px;
    margin-right: 3px;
}

#lnkSelectColumns {
    background: url(http://db.tt/cEFFCjw0) no-repeat center right;
}

#printCalendar {
    background: url(http://db.tt/u94nalQx) no-repeat center right;
}

#aShowPrintByDateRange {
    background: url(http://db.tt/u7OxN09k) no-repeat center right;
}

ここにフィドルがあります: http://jsfiddle.net/C6etX/6/。ご覧のとおり、2 番目のリンクに ID を追加する必要がありました。

于 2012-12-03T23:13:07.300 に答える