CSS：IMG边框和文字装饰(Css : img border and text decoratio

2019-10-30 15:54发布

我想，同时对链接悬停文字修饰，以修复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正常工作。当您悬停首页标有下划线且图像没有边框。如果你想要的形象被强调，以及文本，你需要添加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