列表的跨浏览器兼容悬挂缩进答案

【问题标题】：Cross Browser Compatible Hanging Indent for Lists列表的跨浏览器兼容悬挂缩进
【发布时间】：2013-07-07 13:08:57
【问题描述】：

我有一个无序列表，我试图控制悬挂缩进。在溢出到两行的项目上，我希望第二行文本直接排列在前一行文本的下方（而不是在项目符号下方）。我已经完全按照我想要的方式在 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>

有什么方法可以让所有浏览器的渲染都一样？

【问题讨论】：

标签： html css html-lists

【解决方案1】：

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

【讨论】：

感谢您提供的信息，应该可以。不确定我什么时候有时间实现它，但我喜欢这个主意。

【解决方案2】：

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

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

【讨论】：

这在 Chrome 和 Firefox 上给出了不同的缩进
我将 list-style 更改为 outside disc none; 以使其在 Chrome 中运行！
请注意，<ol> 列表的 list-style 属性是 decimal。

【解决方案3】：

我必须添加到接受的答案中的唯一内容是文本缩进，因为我使用的是 fontello 项目符号：

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

li{
    padding-left: 1em;
}

【讨论】：

文本意图为我做了一些事情，但我的问题是我的项目符号点有自定义图像。目前正在研究如何修复它，因为我的lis 之一的第三行导致了缩进问题。
知道了。对我来说，我有一个ul 和三个lis，只有中间的li 是较长的文本，而在Chrome 响应式iphone5/SE 中，li 的第三行一直到左边而不是与其余元素内联。我的子弹有自定义复选标记图像，因此无法尝试一些建议的答案。我只给了li 一个类和padding-left: 30px; 并为我修复了它。