Chrome 和 Safari 中子弹列表菜单的 CSS 渲染

Posted 2023-03-06

【中文标题】Chrome 和 Safari 中子弹列表菜单的 CSS 渲染

【英文标题】：CSS rendering of Bullet List menu in Chrome and Safari

【发布时间】：2012-02-07 22:38:33

【问题描述】：

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

图片：

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

在我测试的 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>

在 Chrome 中使用 DevTools 会在菜单 div 下显示一个 *Gap：*

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

" "

首页 联系我们 关于我们

终于 如果我将项目符号列表简单地更改为以下代码，它将适用于它们：

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

【问题讨论】：

请发布 HTML 代码而不是 ASP 代码 - 这是一个 HTML 问题，而不是 ASP。

我通过 Chrome 添加了生成的 HTML

问题不在于 HTML，只是渲染了子弹列表...

没有帮助？有人经历过吗？ Webkit 浏览器无法正确呈现的 asp.net 翻译版本中有哪些内容？

【参考方案1】：

看起来它与#mainmenu div 中的那些额外引号有关。你能说出这些是从哪里来的吗？

【讨论】：

我也想知道，使用“查看源代码”它以正常方式显示它，但 DevTools 显示了一个额外的差距

我对 ASP 一无所知，但是是否可以将那个小小的 ASP sn-p 格式化为一行？如果可以，并且渲染正确，则可能是某种不可见字符的问题。我会尝试从该 ASP sn-p 中删除所有空格，如果可行，然后手动添加空格并再次测试。