0

古いスタイルのメニュー コントロールで Chrome が正しく表示されるレンダリングの問題が発生していたので、CSS フレンドリー アダプター (http://cssfriendly.codeplex.com/) に切り替えて使用し、メニュー コントロールを次のようにレンダリングすることにしました。リストを作成し、ブラウザ間の一貫性をさらに高めることを願っていますが、それもうまくいきませんでした!

メニューのスタイルを設定し、Chrome、Safari、Firefox でうまく動作するようになりましたが、IE では動作しません。データソースからロードされた基本的な水平リストがあり、動的リストに 1 ～ 13 の項目が関連付けられています。Chrome と Firefox では、メニューのスタイルを設定した後、動的メニュー項目が静的メニュー項目の下に適切に表示されるようになりました。しかし、IE(7/8) では、動的メニュー項目は、現在ホバーされている静的メニュー項目の右側に直接表示されます (そして、静的メニュー項目の後ろにある最初の動的項目が現在の項目の右側に表示されます)。

Chrome で正常に動作するメニューのスクリーンショットを次に示します: http://i42.tinypic.com/2d3lom.png

IE でホバーされている同じメニューのスクリーンショット (この場合は 8 ですが、7 でも同じように見えます): http://i39.tinypic.com/2vmc4kn.png

メニューのレンダリングされた HTML は次のとおりです。

<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu">
    <ul class="AspNet-Menu">
        <li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected">
            <a href="javascript:void(0);" class="AspNet-Menu-Link  AspNet-Menu-Selected">Home</a>
            <ul>
                <li class="AspNet-Menu-Leaf  AspNet-Menu-ParentSelected">
                    <a href="default.aspx" class="AspNet-Menu-Link  AspNet-Menu-ParentSelected">Home</a>

                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">
                Financial Systems</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="fast/select_fast.aspx" class="AspNet-Menu-Link">Input Sales</a>
                                    </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="fast/select_fast_upload.aspx" class="AspNet-Menu-Link">Upload Sales</a>
                                   </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Reports</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_prior.aspx" class="AspNet-Menu-Link">Prior</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_summary.aspx" class="AspNet-Menu-Link">Summary</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="reports/select_fast_by_month.aspx" class="AspNet-Menu-Link">Monthly</a>
                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Administration</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="shoptracker/ShopTracker.aspx" class="AspNet-Menu-Link">Shop Tracker</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="shoptracker/shopupload.aspx" class="AspNet-Menu-Link">Shop Upload</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_weekly_comp.aspx" class="AspNet-Menu-Link">Weekly Comp Metrics</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_weekly_comp_upload.aspx" class="AspNet-Menu-Link">Weekly Comp Upload</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/fast_estimates.aspx" class="AspNet-Menu-Link">Estimate Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/UserMaintenance.aspx" class="AspNet-Menu-Link">User Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/CorpUserMaintenance.aspx" class="AspNet-Menu-Link">Corporate Users</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/CountryISOCodeMaintenance.aspx" class="AspNet-Menu-Link">Country ISO Code Maint</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/TerritoryMaintenance.aspx" class="AspNet-Menu-Link">Territory Rollup Maint</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/ContentAdmin.aspx" class="AspNet-Menu-Link">Content Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/systemmessage.aspx" class="AspNet-Menu-Link">Edit System Message</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="admin/MenuBarAdminDetails.aspx" class="AspNet-Menu-Link">Menu Maintenance</a>
                </li>
                <li class="AspNet-Menu-Leaf">
                    <a href="/ChangePassword.aspx" class="AspNet-Menu-Link">Change Password</a>
                </li>
            </ul>
        </li>
        <li class="AspNet-Menu-WithChildren">
            <a href="javascript:void(0);" class="AspNet-Menu-Link">Help</a>
            <ul>
                <li class="AspNet-Menu-Leaf">
                    <a href="help.aspx" class="AspNet-Menu-Link">
                        Help Menu</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

そして、これが私のCSSです（IEとChromeでも同じですが、Chromeスタイルシートでは、この下にグラデーションを追加するだけです）：

.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;}
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;}
.AspNet-Menu-Selected {color:#000000;}
.AspNet-Menu-WithChildren a {color:#FFFFFF;}
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;}
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;}
.AspNet-Menu-Leaf a {color:#000000;}
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;}
4

1 に答える 1

0

たぶん追加してみてください：

CSS

ul .AspNet-Menu-WithChildren ul {top:100%; float:none;}

私はそれがIEにあなたが必要とする場所にそれを置くことを強制するかもしれないと考えています. 100% 確実ではなく、ローカル マシンで試すことができませんでした。

于 2012-01-05T15:43:13.120 に答える