Chrome 和 Safari 中项目符号列表菜单的 CSS 渲染

发布于 2024-12-26 05:03:53 字数 2037 浏览 4 评论 0原文

在 Chrome 中渲染我的菜单时出现问题

图像：

编辑： 我是对的，这个问题与渲染 Asp.Net 公告列表控件完全相关，而不是 HTML ！它应该被称为谷歌浏览器的错误之一。有人错误删除了Asp.Net标签，所以我重新添加了它， 我认为 CSS 中的一项更改可能会使 WebKit 浏览器可以理解，黑客技巧或类似的东西可能会有所帮助

源代码将会起作用正如我在 Firfox 8+ 和 IE 9 中测试的那样，菜单将在 Chrome 和 Safari (WebKit) 中下降一级！ 这里有详细信息，非常感谢任何帮助

菜单使用Asp.Net公告列表控件

这是代码：

<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>

在Chrome中使用DevTools将显示*差距< em> 在菜单 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 COde ：

<div id="mainmenu">

“ ”

首页

联系我们

关于我们

最后如果我将项目符号列表简单地更改为以下代码，它将对它们起作用：

<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>

原文

The is a problem in rendering my menu inside Chrome

The Image :

Edit :
I was right, The problem was exactly related to rendering Asp.Net bulletin list Control, and not the HTML ! And it should be called as one of the bugs of Google Chrome.
Somebody deleted the Asp.Net tag wrongly, so I added it again,
I think maybe one change in CSS could make it understandable for the WebKit browsers, a hack a trick, or something similar could help

The source will work as expected in Firfox 8+ and IE 9 as I tested, but the menu will drop one step down in Chrome and Safari (WebKit) !
Here You have the details,
any helps is greatly appreciated

The menu uses Asp.Net Bulletin List Control

This is the Code :

<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>

Using DevTools in Chrome will show a *Gap under the menu 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>

Here as you can see there is a gap (Just viewable via the DevTools ),
when I remove this gap the rendering issue will be disappeared .
It's source via "view source" seems normal ...

Edit - The Generated HTML COde :

<div id="mainmenu">

"
"

Home

About Us

At Last
If I change the bullet List simply to the below code, It'll work on them :

<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>

分享到QQ

分享到微博