如何增加li中的圆点大小？

Question

在IE8中，项目符号太小了，我尝试改变字体大小，但没有起作用。 代码：

<ul style="padding:0; margin:0; margin-left:20px;">
    <li>item 1</li>
    <li>item 2</li>
</ul>

有没有不使用图像作为项目符号的方法？

- user964104

---

我正在询问一些修复的问题... - user964104

是的，我想让子弹点变大，就像 Firefox 一样。 - user964104

这个回答解决了你的问题吗？使用CSS自定义列表项符号 - Kal

Answer 1

您可以在IE8条件注释中实现这个...

ul {
   list-style: none;
}

ul li:before {
   content: "•";
   font-size: 170%; /* or whatever */
   padding-right: 5px;
}

jsFiddle。

在IE7中，您可以通过JavaScript进行前置符号，并相应地对其进行样式设置。

- alex

---

它在IE8中运行良好，但在IE7中不起作用，因为之前在IE7中无法工作。 - user964104

@user964104：是的。不过，你的问题包括IE8中的项目符号... - alex

@alex；在你的CSS中使用十六进制值作为项目符号会更好，因为在某些情况下符号可能无法正常工作。 - sandeep

@sandeep: 在这种情况下，我会使用\2022。 - alex

好主意。我会在 before 选择器中添加 vertical-align:bottom;，让符号看起来更好。 - JeanValjean

如果您想将不同的字符用作列表项目符号，那么这是我喜欢的一个想法。但如果您希望有序列表具有更大的字体，则无法使用此方法。在这种情况下，可以在li中添加一个div，并使用不同/默认的字体值。 - ofer.sheffer

Answer 2

您也可以执行以下操作：

li::marker{
   content:"\25A0";
   font-size: 1.5rem;
   color: black;
   vertical-align: bottom;
}

- Josh Lea Acquah

---

代码可以工作，但是在 content:"\25A0" 和 font-size: 1.5rem 后面缺少了 ;。 - Mansoor Ul Haq

Answer 3

Internet Explorer似乎不支持使用font-size调整带有list-style-type的项目符号大小，而Firefox和Chrome可以。我不知道这是否是一个已知的问题或错误。

虽然有一些解决方法，但有时候使用图片是最快和被广泛支持的“解决方案”。

- Doozer Blake

Answer 4

IE8+可以缩放项目符号，但不是每个字体大小都适用。
我的解决方法基于Verdana的项目符号比Arial更大这一事实。我使用CSS将Verdana设置为li，同时在li内容周围添加额外的标签以保持原始字体。此外，由于Verdana可能会使行高变高，因此我可能需要使用line-height来弥补这一点，但这取决于浏览器。
另外，我可以使用更大的li字体大小来使项目符号更大，然后我将不得不使用更小的line-height。

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>

- KS74