如何解決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>