我正在尝试修复 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>
样式:
.menu-links {
color:#000;
text-decoration:none;
}
.menu-links:hover {
text-decoration:underline;
}
.menu-links img {border: none; }
最佳答案
您包含的代码在 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 这样的调试器来分析控件，看看是什么阻止了下划线的出现。
关于CSS : img border and text decoration，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11888400/