Элемент управления CSS дружественных адаптеров не работает в IE - PullRequest
Новая
       20

Элемент управления CSS дружественных адаптеров не работает в IE

0 голосов
/ 05 января 2012

У меня были некоторые проблемы с отображением элемента управления в старом стиле, из-за которого Chrome выглядел правильно, поэтому я решил переключиться и использовать CSS Friendly Adapters (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;}

1 Ответ

0 голосов
/ 05 января 2012

Может быть, попробуйте добавить:

CSS 

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

Я думаю, что это может заставить IE разместить его там, где вам нужно.Не уверен на 100% и не смог попробовать это на моей локальной машине.

...