This markup是复杂应用程序中真实标记的简化版本。我不能轻易改变它。我已经对其进行了抽象，并将其减少到解决该问题所需的最低限度。
如果您在Chrome和Firefox中查看此垃圾箱，则明显会有所不同。如果您在display: block规则中切换带注释的a > span，您会发现它是造成对齐错误的原因。我真的不知道为什么，或者如何在受影响的浏览器上修复它。
是什么原因导致Firefox和IE（而不是Chrome）上列表项内部的垂直未对齐？
•
问答
poee223 回答：是什么原因导致Firefox和IE（而不是Chrome）上列表项内部的垂直未对齐？
尝试一下
a {
display: flex;
}
我建议您在 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>
在各种浏览器中的输出：
