css - 使用歌剧突出显示列表项时的奇怪行为

Question

当我使用鼠标突出显示我的列表项时，部分文本会消失或移到左侧。当我单击或只是将鼠标移到而不单击或突出显示时，有时也会发生这种情况。 它只发生在列表项上，我使用 Joomla 制作我的网站。

我用 Firefox、IE、Chrome 和 Opera 对此进行了测试，Opera 是唯一具有此行为的。

我想这与我的 CSS 有关？!？!？

Answer 1

这是 Opera Presto(12.x 及更早版本)中的一个已知错误，当​​您尝试将 text-align: justify 样式应用于 li 元素时会发生该错误。要么不要尝试证明列表项内容的合理性，要么使用 this answer 中指定的解决方法，即代替这个:

<li>list item text</li>

您可以将文本包裹在 span 或 div 中，如下所示:

<li>
  <span class="listItemContent">list item text</span>
</li>

并将您的 listItemContent 类(或您想要的任何名称)定义为:

.listItemContent {
  display: inline-block;
  vertical-align: top;
}

这应该可以解决问题(我刚刚在 Dragonfly 中尝试过)。