跨浏览器兼容列表缩进

Question

我有一个无序列表，我正在尝试控制悬挂缩进。对于溢出到两行的项目，我希望第二行文本直接排在前一行文本下面（不在项目符号下面）。我完全按照我想要的方式在Chrome中使用它。但是在Firefox和Internet Explorer中它有点不对。

以下是我目前的情况：

<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>

有没有办法让这个渲染在所有浏览器中都一样？

Answer 1

删除text-indent，将list-style更改为outside，然后将padding-left应用于li元素：

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}

Answer 2

由于我使用的是fontello子弹，我唯一需要添加到接受的答案中的是文本缩进：

ul {
    list-style: disc outside none;
    margin-left: 0; 
    padding-left: 1em;
    text-indent: -2em;
}

li{
    padding-left: 1em;
}

Answer 3

使用CSS reset first，然后相应地调整CSS。