如何删除仅在 Internet Explorer 中出现在导航菜单中的项目符号？

Posted 2023-04-13

【中文标题】如何删除仅在 Internet Explorer 中出现在导航菜单中的项目符号？

【英文标题】：How can I remove the bullet points that appear in the navigation menu only in Internet Explorer?

【发布时间】：2018-06-10 01:40:40

【问题描述】：

我在使用 Internet Explorer 时遇到问题。我一直在使用 CSS 和 html 构建一个菜单，并且在其他 Web 浏览器中一切正常，但是对于 Internet Explorer，当您将鼠标悬停在菜单项上片刻时，项目符号就会出现。它们都被 CSS 隐藏了，我尝试添加 list-style: none 元素，但没有任何效果。有什么想法吗？！

网址：http://www.carrallinson.com

我可以添加更多关于 CSS 的信息，但这一切都非常复杂。作为一个sn-p：

.main-navigation ul ul li 
    padding: 0;
    text-align: left;
    list-style: none;

.main-navigation ul ul li:hover,
.main-navigation ul ul li.focus 
    background: #fff;
    opacity: 1.0;
    list-style: none;

这就是令人困惑的地方。它都被列为“无”但不知何故出现？！

【问题讨论】：

你用的是哪个IE版本？

@Highdef 标签说 IE8

在 IE11 中，悬停时不会出现项目符号。

是的，它的 IE8 @sol

Edge 上也可以看到

【参考方案1】：

我认为您可以将其用于较旧的 IE 版本。不确定它是否适用于 IE8，因为 list-style-type:none 适用于 IE11。

参考：https://github.com/tjvantoll/jquery-ui/commit/6acd1c8640b271db7df03f1457a817d5d6a1f29d

li 
  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

<ul>

  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

另一种方法是使用：

li 
list-style-position: outside;
overflow: hidden;

li 
  list-style-position: outside;
  overflow: hidden;


Position the bullet outside of the list and hide the overflow.

<ul>
 <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>