【问题标题】:How can I fix this strange IE 8 img anchor hover behaviour?如何解决这个奇怪的 IE 8 img 锚悬停行为?
【发布时间】:2009-09-24 06:54:33
【问题描述】:

如果我将它添加到我的 CSS...

small a:hover, a:hover {background-color: #CCC; }

在 IE 8 中查看时也是链接的所有图像都会发生这种情况(在 Firefox 中很好)...

它们看起来不错...

http://notails.com/nothover.jpg

直到我将鼠标悬停在它们上方...

http://notails.com/hover.jpg

如果我删除 CSS 行,行为就会消失。我试过用谷歌搜索,但我遇到了不相关的问题。

【问题讨论】:

    标签: css image internet-explorer-8


    【解决方案1】:

    默认情况下,图像的底边与文本的基线对齐。您看到的灰色空间是基线下方的空间,由 q、p、y 等减速器使用。(您没有文本的事实无关紧要 - 仍然为下降器保留空间。)

    你可以像这样摆脱它:

    a img {  /* You might want to make this rule more specific! */
        vertical-align: bottom;
    }
    

    请参阅 That mysterious gap under images 了解有关此问题的完整讨论。

    【讨论】:

    • 这似乎在两个浏览器中都已修复。谢谢!感谢所有回复的人。
    【解决方案2】:

    您也可以尝试将该项目的 line-height 设置为 0。

    【讨论】:

      【解决方案3】:

      试试

      a {
          margin:  0px;
          padding: 0px;
      }
      

      【讨论】:

      • 事实证明它也发生在 Firefox 中。您的建议在 Firefox 中修复了它,但在 IE 中没有。
      【解决方案4】:

      我认为您可能需要将图像的边框设置为无,所以边框:无;

      【讨论】:

      • 我其实很喜欢边框在某些地方的样子,所以我单独设置了border=none。
      猜你喜欢
      • 1970-01-01
      • 2016-08-12
      • 1970-01-01
      • 1970-01-01
      • 2012-06-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-05-25
      相关资源
      最近更新 更多