CSS 如何增加 li 中的子弹大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7563344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I increase the bullet size in a li?
提问by user964104
The bullets in IE8 are so small, I tried changing the font-size, but that didn't work. Code:
IE8 中的项目符号太小了，我尝试更改字体大小，但没有用。代码：
<ul style="padding:0; margin:0; margin-left:20px;">
<li>item 1</li>
<li>item 2</li>
</ul>
Is there any way to do this without using an image for the bullet?
有没有办法在不使用子弹图像的情况下做到这一点？
回答by alex
You could do this in an IE8 conditional comment...
您可以在 IE8 条件注释中执行此操作...
ul {
list-style: none;
}
ul li:before {
content: "?";
font-size: 170%; /* or whatever */
padding-right: 5px;
}
In IE7, you could prepend the bullet via JavaScript and style it accordingly.
在 IE7 中，您可以通过 JavaScript 在项目符号前面加上相应的样式。
回答by Doozer Blake
Internet Explorer doesn't seem to natively support sizing of the bullets from list-style-typewith font-sizeas Firefox and Chrome appear to. I do not know if this is a known problem or bug.
Internet Explorer不似乎子弹的原生支持，从大小list-style-type与font-sizeFirefox和Chrome的出现。我不知道这是已知问题还是错误。
There are workarounds, but sometimes an image is the quickest and more widely supported "fix".
有一些解决方法，但有时图像是最快和更广泛支持的“修复”。
回答by KS74
IE8+ does scale the bullets but not for every font size.
My fix is based on the fact the bullets for Verdana are larger than for Arial. I use css to set Verdana for li, at the same time I add extra spans around li's contents to keep the original font. Also, as Verdana can makes the lines higher, I may need to use line-height to make up for that, but that depends on the browser.
Also I can use bigger font size for lito make the bullets even larger, then I'll have to use still smaller line-height.
IE8+ 确实会缩放项目符号，但不是针对每种字体大小。
我的修复是基于 Verdana 的子弹比 Arial 大的事实。我使用 css 将 Verdana 设置为li，同时我在li的内容周围添加额外的跨度以保留原始字体。此外，由于 Verdana 可以使线条更高，我可能需要使用 line-height 来弥补这一点，但这取决于浏览器。
我也可以使用更大的字体大小li来使项目符号更大，然后我将不得不使用更小的行高。
ul {
font: 12px Arial;
}
ul li {
font-family: Verdana;
line-height: 120%;
} /* font-size: 14px; line-height: 100%; */
ul li span {
font: 12px Arial;
}
<ul>
<li><span>item 1</span>
<li><span>item 2</span>
</ul>
