如何解决CSS缩进在所有浏览器中都不起作用？

Question

我需要做一个设计如下：

Total Maximum Daily Load, EPA 

• 建模的命运和污染物的运输
• 最大日负荷（TMDL）发展

当你看到“总最大每日负荷“需要与”建模“和”总数“等项目符合。

所需的对齐显示了在Internet Explorer和Firefox，但在Chrome它会显示如下

Total Maximum Daily Load, EPA 

• 建模的命运和污染物的运输
• 最大日负荷（TMDL）发展

“总最大日负载量”与项目符号的“建模”和“总计”不一致，为什么它在一个浏览器中运行，而不是在其他浏览器中运行？我怎样才能使这个缩进浏览器独立。

Answer 1

最简单的解决办法可能是让第一个文本列表中的项目，但没有子弹：

<ul> 
<li style="list-style: none">Total Maximum Daily Load, EPA 
<li>Modeling the Fate and Transport of Pollutants 
<li>Total Maximum Daily Load (TMDL) Development 
</ul> 

另一种解决方案是在这里从ul和li删除所有边距和填充（它的浏览器的差异导致问题），然后为ul设置左边距，并在第一个文本上设置相同的左边距。请注意，这会从ul中删除默认垂直边距，因此除了调整左侧边距值之外，您还可以添加它们。 （中1.3em左右的值可能是最小安全值，在这个意义上，该清单子弹将适合的安全。）

<style> 
ul, li { 
    margin: 0; 
    padding: 0; 
} 
ul, .list-header { 
    margin-left: 1.3em; 
} 
</style> 
<div class="list-header">Total Maximum Daily Load, EPA</div> 
<ul> 
<li>Modeling the Fate and Transport of Pollutants 
<li>Total Maximum Daily Load (TMDL) Development 
</ul>