Css : img border and text decoration

问题

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; }

回答1:

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>

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.

来源：https://stackoverflow.com/questions/11888400/css-img-border-and-text-decoration

标签

css

image

hyperlink

border