Question

我正在尝试修复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; }

Answer 1

您包含的代码在Internet Explorer和Firefox中正常运行。当您悬停并且图像没有边框时，Home会加下划线。如果您希望图片加下划线以及文字，则需要在悬停时向图片添加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这样的调试器来分析控件，看看是什么阻止下划线出现。

Css：img边框和文字装饰

1 个答案: