是什么导致 Firefox 和 IE 上的列表项内部垂直错位，但在 Chrome 中没有？答案

【问题标题】：What is causing the vertical misalignment inside the list item on Firefox and IE, but not in Chrome?是什么导致 Firefox 和 IE 上的列表项内部垂直错位，但在 Chrome 中没有？
【发布时间】：2020-03-04 14:49:45
【问题描述】：

This markup 是复杂应用程序中真实标记的精简版本。我不能轻易改变它。我已经对其进行了抽象并将其减少到解决问题所需的最低限度。

如果您在 Chrome 和 Firefox 中查看此 bin，差异将是显而易见的。如果您在a > span 规则中切换注释的display: block，您会发现它是造成错位的原因。我真的不知道为什么，或者如何在受影响的浏览器上修复它。

【问题讨论】：

标签： css internet-explorer firefox

【解决方案1】：

试试这个

a {
    display: flex;
}

【讨论】：

这确实摆脱了错位/垂直空间，还有列表项项目符号……你能解释一下这里发生了什么吗？
我更新了我的代码。试试这个 display:flex 。并从 li 中删除我的旧代码 display:block。
谢谢，但您能否解释一下为什么这有效以及问题的原因是什么？

【解决方案2】：

我建议您在 a > span 类中进行以下更改，可能有助于解决 Firefox 和 IE 浏览器的此问题。

a > span {
/*  display: block is needed for truncation  */
display:inline-block;
width:250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

工作示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
div {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.428571429;
  color: #4d4e4c;
/* word-break is inhertied */
 word-break: break-all;
  width: 300px;
  outline: 1px dashed #ccc;

}

ul {

}

li {
  outline: 1px solid lightgrey;
}

a {
 
}

a > span {
/*  display: block is needed for truncation  */
display:inline-block;
width:250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

</style>
</head>
<body>
<div>
    <ul>
      <li>
        <a href="#">
          <span>
            <span>Item 1</span>
          </span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>
            <span>Item 2</span>
          </span>
        </a>
      </li>
      <li>
         <a href="#">
          <span>
            <span>Item 3 is long and requires truncation</span>
          </span>
        </a>
      </li>
    </ul>
</div>

</body>
</html>

在各种浏览器中的输出：

【讨论】：

很遗憾，a > span 的宽度不能固定。
您应该在原始帖子中告知您的所有要求。如果您删除宽度，那么您将不会获得省略号效果。解决方案仍然有效。