如何在所有浏览器上运行此CSS工具提示？

Question

我有一个工具提示，我正在调用一个在Firefox中运行得很漂亮的网页，但没有别的。页面本身是两列中的词汇单词列表，每个词汇单词包含带有定义的悬停工具提示，并且全部包含在橙色Div中。在除Firefox之外的每个浏览器上，触发靠近列底部的单词的工具提示会导致几个格式问题。工具提示要么将其自身分开以保持在Div /无序列表中，要么词汇本身会自动移动以便工具提示适合。

这里是工具提示CSS，以及不同浏览器中的一些屏幕截图。我不确定它是否是关于我使用的无序列表的HTML问题，或者工具提示CSS中是否有可以更改的内容。我也尝试在div的底部添加空白空间，希望这可能是一个简单的黑客，但它并没有什么区别。

工具提示CSS：

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   width: 300%;
   min-width:350px;
   max-width:850px;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

Answer 1

我认为问题是由“列”css规则引起的，它可能应用于ul元素或其祖先。所以解决方案可以是其中之一：
1.最简单：只需删除列，让单词放在一列上 2.在“li”而不是列上使用“float：left; width：50％”之类的东西。因此，它们将被安排在2列中，顺序将是水平的 3.使用表格制作2列。
4.最复杂的：使用javascript。在这种情况下，您可以将所有“dropdown-content”元素从其父级中移出columned元素。并制作一个onmousemove脚本，它将计算相应的坐标，移动并显示相应的dropdown-content元素。我不会这样。

Answer 2

不确定你的html是什么样的，但这是一个非常简单的任务。元素分解的屏幕截图非常奇怪。

看看这个（工作）小提琴，做一些澄清/指导：

https://jsfiddle.net/r2ar1Lfb/

需要注意的是，绝对定位的元素可以默认为意外值，因此请务必明确设置它们。

   top:0;
   left:0;

如果您仍有问题，请发布您的HTML。

更新：你似乎有一个列规则，它导致一些不稳定的行为。请发布您的html和可能影响此的任何其他css规则。 （这是一个很好的策略，在这里。）