Css：img边框和文字装饰 [英] Css : img border and text decoration
问题描述
我正在尝试修复IE图像边框问题，同时在链接悬停上进行文本修饰。
边界问题已修复，但装修已消失。
I am trying to fix IE image border problem while having text-decoration on link hover. the border issue is fixed but the decoration is gone.
<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; }
推荐答案
您包含的代码在Internet Explorer中正常运行和Firefox。当您悬停并且图像没有边框时，Home会加下划线。如果你想要图像加下划线和文字，你需要添加 border-bottom 而不是 text-decoration 悬停时的图片：
The code you included is working properly in Internet Explorer and Firefox. Home is underlined when you hover and the image has no border. If you want the image to be underlined as well as the text, you'll need to add border-bottom rather than text-decoration to the image on hover:
<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这样的调试器来分析控件，看看是什么阻止下划线出现。
If that's not showing up right, you've probably got some other CSS interfering with the styles you posted above. Use a debugger like Firebug to analyze the control and see what's preventing the underline from showing up.
这篇关于Css：img边框和文字装饰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
