IE9 img hover 将边距添加到底部答案

【问题标题】：IE9 img hover add's margin to bottomIE9 img hover 将边距添加到底部
【发布时间】：2011-09-25 22:29:57
【问题描述】：

我遇到了一个非常奇怪的问题，不知道如何解决它。出现问题的网页有一个 div，其中有几个水平的可点击图像。当悬停可点击图像 () 时，15 像素的边框会改变颜色，当离开悬停状态时，边框颜色会再次变为原始颜色。奇怪的问题是，当我将任何图像悬停在 div 中或离开悬停状态时，div 下的边距不断扩大，这当然是不可接受的。此问题仅在 IE9 中出现。 Chrome 和 Firefox 运行良好。我没有在以前的 IE 版本上测试过。我认为问题可能出在以下 CSS 语句中：

#content_links #fotos #foto{
    text-align: center;
    width: 488px;
    overflow-y: hidden;
    white-space: nowrap;
    margin-left: 22px;
    margin-bottom: 70px;
}

#content_links #fotos #foto a{
    text-decoration: none;
}

#content_links #fotos #foto img{
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 6px;
    border: 3px solid silver;
    border-bottom-width: 15px;
}

#content_links #fotos #foto a:hover img{
    border: 3px black solid;
    border-bottom-width: 15px;
}

有解决这个问题的线索吗？提前致谢，

托马斯

【问题讨论】：

当我的 div 有一些溢出时，我也会遇到同样的问题。如果我将 div 修复为足够大以包含所有内容而不会溢出，则问题不会发生。

标签： hover internet-explorer-9 border margin

【解决方案1】：

你是否为你的 html 声明了一个文档类型？我注意到 IE 和没有边框的奇怪事情。我不确定这是否适用于 IE 9。

请参阅here，了解 CSS 以及与 Internet Explorer 的兼容性。

【讨论】：

是的，我已经声明了一个文档类型。我一直在尝试，问题似乎出在 overflow-y: hidden;陈述。当我删除该行时，问题就消失了。我需要隐藏它，所以这不是一个令人满意的解决方案。