admin管理员组文章数量:1426847
I e to you guys with an issue that I have been trying to solve since the past 4 days . Having spent a lot of time trying to fix the issue although I have found work-arounds I have not solved the problem.
The problem is with List-Styling , specifically List-style:none which I am trying to apply to a list which is not displayed when the page is loaded (display:none).
When the page loads the user can click on a button which should then change the list from none to block displaying the list on the page.
Now this works fine on Chrome , Firefox and IE however for whatever reason when the list displays on Edge it shows bullet points.
I can apply List-style:square , or circle or disc and all of them will be applied however List style None is pletely ignored although I can see it in developer tools .
I have found ways around this ( using visibility instead of display , using list-style-image data 0 which both work .
However I still havnt found a solution for my problem.
My code ( or code I can show ) is as follows..
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;
}
Now using List-style: none inline works like a charm , also Using it in the Head in Style tags also works a charm just external stylesheet which doesnt work.
Hopefully someone can help , and hopefully I havnt confused everyone.
Additional note : I have been unable to replicate the issue on sites like JsFiddle.
I e to you guys with an issue that I have been trying to solve since the past 4 days . Having spent a lot of time trying to fix the issue although I have found work-arounds I have not solved the problem.
The problem is with List-Styling , specifically List-style:none which I am trying to apply to a list which is not displayed when the page is loaded (display:none).
When the page loads the user can click on a button which should then change the list from none to block displaying the list on the page.
Now this works fine on Chrome , Firefox and IE however for whatever reason when the list displays on Edge it shows bullet points.
I can apply List-style:square , or circle or disc and all of them will be applied however List style None is pletely ignored although I can see it in developer tools .
I have found ways around this ( using visibility instead of display , using list-style-image data 0 which both work .
However I still havnt found a solution for my problem.
My code ( or code I can show ) is as follows..
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;
}
Now using List-style: none inline works like a charm , also Using it in the Head in Style tags also works a charm just external stylesheet which doesnt work.
Hopefully someone can help , and hopefully I havnt confused everyone.
Additional note : I have been unable to replicate the issue on sites like JsFiddle.
Share Improve this question edited Jan 4, 2018 at 23:10 PleaseHelpTheNoob asked Jan 4, 2018 at 20:44 PleaseHelpTheNoobPleaseHelpTheNoob 6610 bronze badges4 Answers
Reset to default 4i had the same problem... its ridiculous, but "white-space:nowrap;" at your li maybe can fix the problem.
I had a similar problem and the "white-space: nowrap" hack worked. More info: I had a UL that was styled list-style: none and was still showing bullets only in IE Edge. I would inspect the element and turn the "list-style: none" rule off and then back on and voila, bullets gone. Adding "white-space: nowrap" to the UL made the bullets not show on first load as intended. Thanks!
you can use "white-space: normal". not fine - but it works.
To fix this bug, just write the following code:
ul li {
list-style:none;
list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
Hope this helps. :)
本文标签： javascriptRemove Bullet points from EdgeStack Overflow
版权声明：本文标题：javascript - Remove Bullet points from Edge - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745484865a2660337.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论