Я пришел к вам, ребята, с проблемой, которую я пытался решить в течение последних 4 дней. Потратив много времени, пытаясь решить проблему, хотя я нашел обходные пути, я не решил проблему.
Проблема заключается в List-Styling , в частности List-style:none, который я пытаюсь применить к списку, который не отображается при загрузке страницы (display:none).
Когда страница загружается, пользователь может нажать кнопку, которая затем должна изменить список с «Нет» на блокировку отображения списка на странице.
Теперь это отлично работает в Chrome, Firefox и IE, однако по какой-то причине, когда список отображается в Edge, он показывает маркеры.
Я могу применить List-style:square, круг или диск, и все они будут применены, однако стиль List None полностью игнорируется, хотя я вижу это в инструментах разработчика.
Я нашел способы обойти это (используя visibility вместо display, используя данные list-style-image 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;
}
Теперь, используя стиль списка: ни один встроенный не работает как шарм, а также использование его в тегах Head in Style также работает шарм, только внешняя таблица стилей, которая не работает.
Надеюсь, кто-то может помочь, и, надеюсь, я не запутал всех.
Дополнительное примечание: мне не удалось воспроизвести проблему на таких сайтах, как JsFiddle.
