html - 当 CSS 缩进不适用于所有浏览器时，我该如何解决？

Question

我需要做如下设计:

   Total Maximum Daily Load, EPA

• 污染物的归宿和迁移建模
• 总最大每日负荷 (TMDL) 开发

如您所见，“总最大每日负荷”需要与要点“建模...”和“总...”保持一致。

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

 Total Maximum Daily Load, EPA

• 污染物的归宿和迁移建模
• 总最大每日负荷 (TMDL) 开发

“Total Maximum daily load”与要点的“建模”和“总计”不一致，为什么它在一个浏览器中有效而在其他浏览器中无效？我怎样才能让这个缩进浏览器独立。

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>