javascript - 在 IE9 中用换行符添加一个额外的空格

Question

我有 li with display:inline 以便它以水平顺序显示。现在我需要添加一个换行符，所以我添加如下内容，

<style>
ul, li {
    display:inline
}
</style>

<ul>
  <li>Coffee</li>
  <li>Tea<br></li>
  <li>Milk</li>
</ul>

我将 br 移到 li 中，否则会出现 html 验证错误。但是当 br 位于 li 内部时，它会在新行开始之前添加一个额外的空间。如何摆脱它？

Answer 1

是的，有些浏览器使用 inline 和 inline-block 元素，因为作为 inline 元素，标签之间的空间被认为是HTML 的一部分和浏览器认为它与我们在任何内联元素之前提供的空间相同

例子

this a a sample text which have <span>inline elements</span> and <a href="#">anchor tags</a>

在这段代码中，我们在内联元素之前有空格，浏览器会保留它。因为它是脚本的一部分 在您的情况下内联 li 也是如此

有很多解决方案，下面列出了其中一些

解决方案一

去掉li结束标签和开始标签之间的空格

<ul>
  <li>Coffee
  </li><li>Tea<br>
  </li><li>Milk</li>
</ul>

方案二

将字体大小“0”应用于父元素 UL 并为 li 定义字体大小

<style>
ul, li {
    display:inline
}

ul {
     font-size:0;
}
li {
    font-size:1.2em;
}

</style>