html - 无法弄清楚奇怪的 ie7 行为。悬停时无缘无故出现滚动条

Question

我有以下布局:

https://dustinhendricks.com/breastfest/index.html

在 ie7 中(或 ie8 中的兼容性 View 模式)，每当我将鼠标悬停在其中一个菜单项上时，浏览器都会获得一个向右延伸很远的水平滚动条。当您将鼠标悬停在其中一个菜单项上时，所有发生的事情是，菜单项的高度增加了 2 像素，并且它的顶部边距变为 -2 像素，这就是为什么这会导致出现看似无关的滚动条如此奇怪。

我曾经在 ul、li 和 a 标签周围加上彩色边框，看看是否有什么东西变得异常大，但仍然没有发现任何异常。关于为什么会发生这种情况的任何想法？

请注意，该链接适用于有益于乳腺癌的节日并且适合工作

Answer 1

无法弄清楚为什么会这样，但我可以告诉你，如果你将 #main #header ul li a 元素设置为 display:inline-block而不是 display:block 它工作正常。最初认为这可能是 IE 的问题 Negative Margin Bug但这不应该影响 IE8，虽然它可能是由于 IE8 的兼容模式引擎......谁知道，它的 IE，这个浏览器的上下左右。