CSS-рендеринг меню Bullet List в Chrome и Safari - PullRequest
Новая
       11

CSS-рендеринг меню Bullet List в Chrome и Safari

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

Проблема в рендеринге моего меню внутри Chrome

Изображение:

Редактировать: Я был прав, проблема была в точности связана с рендерингом Asp.Net, а не с HTML! И это следует назвать одной из ошибок Google Chrome. Кто-то неправильно удалил тег Asp.Net, поэтому я добавил его снова, Я думаю, что, возможно, одно изменение в CSS могло бы сделать его понятным для браузеров WebKit, взломать трюк или что-то подобное может помочь

Источник будет работать, как и ожидалось, в Firfox 8+ и IE 9, как я тестировал, но в Chrome и Safari (WebKit) меню опустится на шаг! Здесь у вас есть детали, любая помощь очень ценится

В меню используется Asp.Net Bulletin List Control

Это код: 

<div id="mainmenu">
    <asp:BulletedList  id="nav" Runat="server" DisplayMode="HyperLink" Target="_self" EnableViewState="false">
        <asp:ListItem 
            Text="Home"
            Value="" />
        <asp:ListItem 
            Text="Contact Us"
            Value="#" />
        <asp:ListItem 
            Text="About Us"
            Value="#" />
    </asp:BulletedList>
</div>

Использование DevTools в Chrome покажет * Gap в меню div: *

<div id="mainmenu">
    <ul id="nav">
        <li><a href="default.aspx" target="_self">Home</a></li><li><a href="contact.aspx" target="_self">Contact Us</a></li><li><a href="about.aspx" target="_self">About Us</a></li>
    </ul>
</div>

Здесь, как вы можете видеть, есть пробел (только для просмотра через DevTools), когда я устраню этот пробел, проблема рендеринга исчезнет. Это источник через "просмотр источника" кажется нормальным ...

Правка - Сгенерированный HTML-код: 

<div id="mainmenu">

» "

Home Свяжитесь с нами О нас

Наконец Если я просто изменю список маркеров на приведенный ниже код, он будет работать с ними: 

<ul id="nav">
    <li><a href="../default.aspx">Home</a></li>
    <li><a href="../contact.aspx">Contact Us</a></li>
    <li><a href="../about.aspx">About</a></li>
</ul>

1 Ответ

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

Похоже, это как-то связано с этими дополнительными кавычками внутри #mainmenu div. Можете ли вы сказать, откуда они?

...