IE 在没有背景设置的悬停中不包括边距和填充

Question

我设计了一个类似于 Suckerfish 模型的纯 CSS 下拉导航菜单，我希望在主导航按钮和下拉的嵌套 ul 之间留一点空间。为此，我在嵌套列表的顶部添加了少量填充。虽然在所有其他浏览器中都能正常运行，但邪恶的 IE 存在一个小问题。

下拉菜单（嵌套的 ul）变得可见，因为您将鼠标悬停在包含它的 li 上，或者直接悬停在主导航按钮上，或者悬停在嵌套的 ul（ul li 的子级）上。问题是，没有任何版本的 IE 考虑元素本身的元素部分的填充，其中涉及悬停，因此，只要您将鼠标从主导航按钮向下移动到下拉列表中，它就会放下悬停并且下拉列表消失。

但是，我最近发现 IE 仅在您没有设置背景时才会执行此操作。如果我将填充放在嵌套的 ul 上，并设置背景，它就可以正常工作。这是一个haslayout问题吗？我不这么认为，因为我尝试了其他一些方法来触发 haslayout 无济于事。有没有其他方法可以在没有背景的情况下解决这个问题？由于多种原因，我不能拥有一个。

哦，另一个花絮，我试过了，它甚至可以在 rgba(0,0,0,0) 的背景下工作，换句话说，透明背景，这将是完美的，除了仅在支持 rgba 的 IE 版本中（换句话说，只有 9 岁及以上，所以 9)。

任何想法都将不胜感激，尽管这不是我一个人的工作，因此我将无法发布任何代码。我想如果有必要我可以打出一个例子，但在我遇到所有这些麻烦之前，我会先看看你们的想法。提前致谢！

Answer 1

感谢您提出这个问题，我遇到了完全相同的问题，您添加 rgba(0,0,0,0) 半修复的想法使我找到了一个我认为适用于所有版本的 IE 和不会影响其他已经运行的浏览器。

我创建了一个 1 x 1 像素的透明 gif（我使用 gif 而不是 png，因此旧版本的 IE 仍然可以使用），然后将其设置为下拉元素的背景。这是我的代码的样子：

.nav .drop {
  background: url(../images/1x1.gif);
}

希望对遇到相同问题并遇到此帖子的其他人有所帮助。

Answer 2

只需将 100% 透明的 PNG 作为背景...