1

(これはおそらくこのバグの無数のバージョンであるため、申し訳ありませんが、この問題のさまざまなフレーバーをグーグル検索し、提案された修正のさまざまなバージョンを試しましたが、これまでのところ、機能する修正はありません。)

ヘッダー バーの右端に 2 つのボタンを配置しようとしています。どちらかまたは両方が表示されるか、どちらも表示されないようにフロートする必要があります (ページ上の非表示の要素を再表示するためのボタンです)。

目的のレイアウトを IE7 バージョンと比較した画像を次に示します。

Skydrive 上の小さな JPG 画像

ご覧のとおり、両方のボタン (およびスペースのみを含むフィラー div) は、ヘッダー バーの内側ではなく、その下にあります。

ここにページがあります...

             <div class="divHeaderBar">
                Welcome To James Hay Online
                <div id="filler" style="display: inline-block; *display: inline; float: right; width: 20px; height: 10px; z-index: 60;"> </div>
                <div id="divShowApplyOnline" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
                    onclick="javascript:ShowApplyOnline()" runat="server">
                    <img title="Show the Apply Online section" src="/portal/images/details_open.png"
                    alt="Show the Apply Online section" />
                </div>
                <div id="divShowMainFeature" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
                    onclick="javascript:ShowMainFeature()" runat="server">
                    <img title="Show the News Feature section" src="/portal/images/details_open.png"
                    alt="Show the News Feature section" />
                </div>
            </div>

そして、これがスタイルシートにあるスタイリングのビットです...

.divHeaderBar {
   background-color:       #008DA9;
   color:                  White;
   font-weight:            bold;
   font-size:              10pt;
   line-height:            30px;
   text-indent:            10px;
}

position: absolute と right: 0 をいじってみました。 float: left を含む div を使用してみましたが、これまで試したことはありません。

どんな助けでも大歓迎です！

4

1 に答える 1

4

マークアップの位置を切り替えると、次のことが役立ちます。

     <div class="divHeaderBar">
        <div id="filler" style="display: inline-block; *display: inline; float: right; width: 20px; height: 10px; z-index: 60;"> </div>
        <div id="divShowApplyOnline" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
            onclick="javascript:ShowApplyOnline()" runat="server">
            <img title="Show the Apply Online section" src="/portal/images/details_open.png"
            alt="Show the Apply Online section" />
        </div>
        <div id="divShowMainFeature" class="" style="display: inline-block; *display: inline; float: right; margin-top: 5px; height: 10px; width: 20px; z-index: 60; cursor: pointer;"
            onclick="javascript:ShowMainFeature()" runat="server">
            <img title="Show the News Feature section" src="/portal/images/details_open.png"
            alt="Show the News Feature section" />
        </div>
        Welcome To James Hay Online
    </div>

適切な浮動要素が最初に来て、それから他のすべてが来ます。このように、IE7 はそれらを正しくフロートするはずです。

ヒント: : HTML、CSS、Javascript を分離することを検討してください。インライン CSS とインライン イベント ハンドラーはあまり良い考えではありません。懸念事項を分離すると、可読性と保守性が向上します。

于 2012-11-23T14:40:49.143 に答える