从边缘移除项目符号点答案

【问题标题】：Remove Bullet points from Edge从边缘移除项目符号点
【发布时间】：2018-01-04 20:44:06
【问题描述】：

我来找你们的问题是我过去 4 天以来一直在努力解决的问题。花了很多时间试图解决这个问题，虽然我找到了解决方法，但我还没有解决这个问题。

问题在于 List-Styling ，特别是 List-style:none ，我试图将其应用于加载页面时未显示的列表（显示：无）。

当页面加载时，用户可以点击一个按钮，然后将列表从无更改为阻止在页面上显示列表。

现在这在 Chrome、Firefox 和 IE 上运行良好，但是无论出于何种原因，当列表显示在 Edge 上时，它会显示项目符号。

我可以应用 List-style:square 或 circle 或 disc 并且所有这些都将被应用但是 List style None 被完全忽略，尽管我可以在 developer tools 看到它。

我找到了解决这个问题的方法（使用可见性而不是显示，使用列表样式图像数据 0 两者都可以工作。

但是我仍然没有找到解决问题的方法。

我的代码（或我可以显示的代码）如下..

HTML
    <!DOCTYPE HTML>
    <html xml:lang="en" lang="en">
    <head>

<link rel="stylesheet" type="text/css" href="/css/style.css" />

</head>
<body>
<button onclick="myFunction()">Click Me</button>
<div class="theList" id="myDIV">
    <ul id="theul">
        <li style="list-style: none;">one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
</body>
</html>
<script>
    function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
    </script>

CSS

#theul li{
    display: list-item;
    //list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    list-style: none;
}
.theList{
    display: none;
}

现在使用 List-style: none inline 像魅力一样工作，在样式标签的 Head 中使用它也可以工作魅力只是外部样式表不起作用。

希望有人可以提供帮助，希望我没有让大家感到困惑。

附加说明：我无法在 JsFiddle 等网站上复制该问题。

【问题讨论】：

标签： javascript html css html-lists microsoft-edge

【解决方案1】：

我也有同样的问题......这很荒谬，但是“空白：nowrap;”在你的李也许可以解决这个问题。

【讨论】：

【解决方案2】：

我遇到了类似的问题，“white-space: nowrap” hack 奏效了。更多信息：我有一个样式为 list-style: none 的 UL，并且仍然仅在 IE Edge 中显示项目符号。我会检查元素并关闭“列表样式：无”规则，然后重新打开，瞧，子弹消失了。在 UL 中添加“white-space: nowrap”会使项目符号在首次加载时未按预期显示。谢谢！

【讨论】：

【解决方案3】：

您可以使用“空白：正常”。不好 - 但它有效。

【讨论】：

【解决方案4】：

要修复此错误，只需编写以下代码：

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

希望这会有所帮助。 :)

【讨论】：