Css : img 边框和文字装饰答案

【问题标题】：Css : img border and text decorationCss : img 边框和文字装饰
【发布时间】：2012-08-06 23:20:48
【问题描述】：

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

【问题讨论】：

您要给图片加下划线吗？我使用了上面的代码，当您悬停链接时，“主页”带有下划线。
@Jason 不，当鼠标悬停在链接上时，我希望文本带有下划线。我想删除边框，因为在 IE 中 img 周围有一个边框。

标签： css image hyperlink border

【解决方案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 这样的调试器来分析控件并查看是什么阻止了下划线显示。

【讨论】：

是的，它没有显示...我真的不明白发生了什么。它确实适用于 DreamWeaver，但在我上传文件并通过浏览器检查时不起作用。这不应该是缓存问题，因为我可以看到更改的来源。弄糊涂了
你有什么方法可以分享整个页面吗？
我无法共享页面本身，但这是整个 css 文件：pastebin.com/nGerzidF 我认为你是对的，有些东西与下划线有冲突。用我的 css 文件尝试了你的代码，但它不起作用。似乎我的 css 有问题
看起来您正在完全定位您的 menu-home-logo。是否有可能它离文本太近并且位于下划线的顶部？尝试更改为top:19px; 或其他内容，以消除这种可能性
不，似乎更改其顶部根本不会影响带下划线的文本。尝试给它-50px或100px。没有运气