Css : img border und text-Dekoration

Ich bin versucht zu reparieren, IE Bild-Rand-problem, während mit "text-decoration" auf link-hover.
die Grenze Problem wird behoben, aber die Dekoration ist verschwunden.

<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; }
  • Wollen Sie das Bild Unterstrichen werden? Ich benutzt den code oben und "Home" wird Unterstrichen, wenn Sie den Mauszeiger von dem link.
  • Nein, ich will den text Unterstrichen dargestellt, wenn der Mauszeiger den link. und ich will den Rahmen zu entfernen, weil im IE gibt es einen Rahmen um img.
InformationsquelleAutor xperator | 2012-08-09
  1. 1

    Den code, den Sie enthalten, ist ordnungsgemäß in Internet Explorer und Firefox. Home ist Unterstrichen, wenn Sie die Maus und das Bild hat keine Grenze. Wenn Sie möchten, dass das Bild Unterstrichen werden ebenso wie der text müssen Sie hinzufügen border-bottom eher als text-decoration dem Bild auf 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>

    Wenn das nicht zeigen, bis rechts, haben Sie wahrscheinlich einige andere CSS sich mit den Formatvorlagen, die Sie oben gepostet. Verwenden Sie einen debugger wie Firebug zu analysieren, die Steuerungs-und sehen, was zu verhindern die untere Linie von oben zeigen.

    • Ja, es ist nicht zu zeigen... ich verstehe wirklich nicht, was Los ist. Es funktioniert auf DreamWeaver, aber nicht, wenn ich die Datei hochladen und überprüfen es durch den browser. Sollte es kein cache-Problem, da sehe ich die geänderten Sourcen. verwirrt
    • Haben Sie irgendeinen Weg, um die gesamte Seite?
    • Ich kann nicht die Seite selbst, sondern hier ist die gesamte css-Datei : pastebin.com/nGerzidF ich denke, dass Sie Recht hat, das etwas in Konflikt mit dem unterstreichen. Habe versucht deinen code mit meinem css-Datei und es funktioniert nicht. scheint etwas falsch mit meiner css
    • Wie es aussieht bist du absolut positionieren Sie Ihre Menü-home-logo. Ist es möglich es zu nah am text und ist sitzen oben auf dem unterstreichen? Versuchen Sie top:19px; oder so etwas, nur das zu eliminieren, als eine Möglichkeit
    • Nein, es scheint eine änderung seiner Spitze hat keinen Einfluss auf den unterstrichenen text an alle. Habe versucht, es -50px oder 100px. kein Glück
    • Ok habe das problem gefunden... hatte auf ändern .menu-links zu .menu-links div und .menu-links:hover zu .menu-links div:hover

    InformationsquelleAutor Jason
Schreibe einen Kommentar