0

我正在尝试修复 IE 图像边框问题，同时在链接悬停时进行文本装饰。边界问题已解决，但装饰消失了。

<a href="home.php" class="menu-links">
<div class="menu-home">Home</div>
<img class="menu-home-logo" src="images/home.png" width="32" height="32">
</a>

CSS：

.menu-links {
    color:#000;
    text-decoration:none;
}
.menu-links:hover {
    text-decoration:underline;
}
.menu-links img {border: none; }
4

1 回答 1

1

您包含的代码在 Internet Explorer 和 Firefox 中正常运行。悬停时主页带有下划线并且图像没有边框。如果您希望图像和文本都带有下划线，则需要在悬停时添加border-bottom而不是添加到图像中：text-decoration

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            .menu-links { color:#000; text-decoration:none; }
            .menu-links:hover { text-decoration:underline; }
            .menu-links img { border: none; }
            .menu-links:hover img { border-bottom: 1px solid #000; }
        </style>
    </head>

    <body>
        <a href="home.php" class="menu-links">
            <div class="menu-home">Home</div>
            <img class="menu-home-logo" src="images/home.png" width="32" height="32">
        </a>
    </body>
</html>

如果显示不正确，则可能是其他一些 CSS 干扰了您在上面发布的样式。使用像 Firebug 这样的调试器来分析控件并查看是什么阻止了下划线出现。

于 2012-08-09T17:18:17.820 回答