Die Schaltfläche innerhalb des Ankerlinks funktioniert in Firefox, aber nicht in Internet Explorer?

Alles andere auf meiner Website scheint mit allen Browsern kompatibel zu sein, mit Ausnahme meiner Links. Sie erscheinen auf der Seite, funktionieren aber nicht. Mein Code für die Links lautet wie folgt:

<td bgcolor="#ffffff" height="370" valign="top" width="165">
    <p>
        <a href="sc3.html">
            <button style="width:120;height:25">Super Chem #3</button>
        </a> 
        <a href="91hollywood.html">
            <button style="width:120;height:25">91 Hollywood</button>
        </a> 
        <a href="sbubba.html">
            <button style="width:120;height:25">Super Bubba</button>
        </a> 
        <a href="afgoohash.html">
            <button style="width:120;height:25">Afgoo Hash</button>
        </a> 
        <a href="superjack.html">
            <button style="width:120;height:25">Super Jack</button>
        </a> 
        <a href="sog.html">
            <button style="width:120;height:25">Sugar OG</button>
        </a> 
        <a href="91pk91.html">
            <button style="width:120;height:25">91 x PK</button>
        </a> 
        <a href="jedi1.html">
            <button style="width:120;height:25">Jedi</button>
        </a>
    </p>
    <p>&nbsp;</p>
    <a href="http://indynile99.blogspot.com">
        <button style="width:120;height:25">Blog</button>
    </a>
    <p>&nbsp;</p>
</td>

Sie können kein Element <button>in einem <a>Element haben. In der Beschreibung des W3-Inhaltsmodells für das <a>Element heißt es:

"Es darf keinen Nachkommen für interaktive Inhalte geben."

(a <button>wird als interaktiver Inhalt betrachtet )

Um <a>den gewünschten Effekt zu erzielen, können Sie die Tags entfernen und jeder Schaltfläche einen einfachen Ereignishandler hinzufügen, der den Browser zum gewünschten Ort navigiert, z

<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />

Bitte denken Sie jedoch daran, dies nicht zu tun. Es gibt einen Grund, warum regelmäßige Links so funktionieren wie sie:

• Benutzer können Links sofort erkennen und verstehen, dass sie zu anderen Seiten navigieren
• Suchmaschinen können sie als Links identifizieren und ihnen folgen
• Screenreader können sie als Links identifizieren und ihre Benutzer entsprechend beraten

Sie fügen außerdem eine völlig unnötige Anforderung hinzu, dass JavaScript aktiviert sein muss, um nur eine grundlegende Navigation durchzuführen. Dies ist ein so grundlegender Aspekt des Webs, dass ich eine solche Abhängigkeit als inakzeptabel betrachten würde.

Falls gewünscht, können Sie Ihre Links mithilfe eines Hintergrundbilds oder einer Hintergrundfarbe, eines Rahmens und anderer Techniken so gestalten, dass sie wie Schaltflächen aussehen. Unter dem Deckblatt sollten sie jedoch normale Links sein.

Nur eine Anmerkung:
W3C hat kein Problem mit der Schaltfläche innerhalb des Link-Tags, es ist also nur ein weiterer MS-Substandard.

Antwort :
Verwenden Sie die Ersatzschaltfläche, es sei denn, Sie möchten ein vollständiges Bild erstellen.

Die Ersatzschaltfläche kann in das Tag eingefügt werden (sicherer, wenn Sie Bereiche verwenden, keine Divs).

Es kann so gestaltet werden, dass es wie ein Knopf oder etwas anderes aussieht.

Es ist vielseitig einsetzbar - ein Teil des CSS-Codes unterstützt alle Instanzen - definieren Sie CSS nur einmal und kopieren Sie ab diesem Zeitpunkt einfach die HTML-Instanz, wo immer Ihr Code dies erfordert.

Jede Schaltfläche kann eine eigene Bezeichnung haben - ideal für mehrsprachige Seiten (einfacher als Bilder für jede Sprache zu erstellen - glaube ich) - und ermöglicht außerdem die einfachere Verbreitung von Instanzen in Ihrem gesamten Skript.

Passt die Breite an die Etikettenlänge an - nimmt auch eine feste Breite an, wenn es Ihren Wünschen entspricht.
IE7 ist eine Ausnahme von oben - es muss eine Breite haben oder macht diese Schaltfläche von Kante zu Kante - alternativ zu einer Breite können Sie die Schaltfläche nach links schweben lassen
- CSS für IE7:
ein. Breite: 150px; (Notieren Sie sich den Punkt vor der Eigenschaft. Normalerweise ziele ich auf IE7 ab, indem ich einen solchen Punkt hinzufüge. Entfernen Sie den Punkt, und die Eigenschaft wird von allen Browsern gelesen.)
b. Textausrichtung: Mitte; - Wenn Sie eine feste Breite haben, müssen Sie diese haben, um Text / Beschriftung zu
zentrieren. c. Cursor: Zeiger; - Alle IE müssen dies haben, um den Linkzeiger korrekt anzuzeigen. - Gute Browser benötigen ihn nicht.

Sie können mit diesem Code vorwärts gehen und ihn mit CSS3 formatieren, anstatt Bilder zu verwenden:
a. Radius für runde Ecken (Einschränkung: IE zeigt sie quadratisch an)
b. Farbverlauf, um es "button like" zu machen (Einschränkung: Die Oper unterstützt keine Farbverläufe. Denken Sie also daran, die Standard-Hintergrundfarbe für diesen Browser festzulegen.)
c. Verwenden Sie: Hover pclass, um den Schaltflächenstatus abhängig von der Position des Mauszeigers usw. zu ändern. Sie können ihn nur auf die Textbeschriftung oder die gesamte Schaltfläche anwenden

CSS-Code unten :

.button_surrogate span { margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_edge.png) left top no-repeat; }

.button_surrogate span span { display:block; padding:0 14px; height:25px; background:url(right_button_edge.png) right top no-repeat; }

.button_surrogate span span span { display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; }

HTML-Code unten (Schaltflächeninstanz) :

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>

$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed

Der folgende Code funktioniert in allen Browsern einwandfrei:

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>

Sie können keine Schaltfläche in einem aTag haben. Sie können jedoch Javascript verwenden, damit es funktioniert.

Wenn Sie ein Framework wie Twitter Bootstrap verwenden, können Sie einem Tag einfach die Klasse "btn" hinzufügen. Ich hatte gerade einen Benutzeranruf wegen dieses Problems. Anscheinend funktionierte meine Checkout-Schaltfläche nicht, weil ich eine Schaltfläche in einem a hatte tag ... stattdessen habe ich gerade die btn-Klasse hinzugefügt und sie funktioniert jetzt perfekt. Großer Fehler, der wahrscheinlich Kunden gekostet hat - und ich vergesse manchmal, den Code zu überprüfen, damit alles im IE funktioniert.

Z.B <a href="link.com" class="btn" >Checkout</a>

Ich fand, dass dies für mich funktioniert

<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">

Da dies nur ein Problem im IE ist, stelle ich zunächst fest, ob der Browser IE ist, und verwende in diesem Fall ein jquery click-Ereignis. Ich habe diesen Code in eine globale Datei eingefügt, damit er auf der gesamten Site behoben ist.

if (navigator.appName === 'Microsoft Internet Explorer')
{
    $('a input.button').click(function()
    {
        window.location = $(this).closest('a').attr('href');
    });
}

Auf diese Weise haben wir nur den Aufwand, verknüpften Eingabeschaltflächen für den IE Klickereignisse zuzuweisen. Hinweis: Der obige Code befindet sich in einer Dokumentbereitschaftsfunktion, um sicherzustellen, dass die Seite vollständig geladen ist, bevor Klickereignisse zugewiesen werden.

Ich habe meinen Eingabeschaltflächen auch Klassennamen zugewiesen, um bei der Verwendung des IE etwas Overhead zu sparen, damit ich danach suchen kann

$('a input.button')

anstatt

$('a input[type=button]')

.

<a href="some_link"><input type="button" class="button" value="some value" /></a>

Darüber hinaus verwende ich CSS, um die Schaltflächen anklickbar zu machen, wenn Sie mit der Maus darüber fahren:

input.button {cursor: pointer}

<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>

Dies funktioniert einwandfrei Ich hatte es auf IE9 getestet.

Das Problem hierbei ist, dass sich der Link hinter der Schaltfläche befindet, auch wenn der Z-Index geändert wird. Dieses Markup ist ebenfalls ungültig ( lesen Sie die Spezifikation ). Der Grund, warum die Links nicht funktionieren, ist, dass Sie tatsächlich auf die Schaltfläche und nicht auf den Link klicken. Die Lösung besteht darin, Ihr Markup zu ändern.

<button type="button"><a href="yourlink">Link</a></button>

Dann nach Bedarf stylen. Eine Demo ist da .

Dies ist eigentlich sehr einfach, kein Javascript erforderlich.

Setzen Sie zuerst den Anker in den Knopf

<button><a href="#">Bar</a></button>

Verwandeln Sie dann das Ankertag in ein Blockelement und füllen Sie dessen Container

button a {
  display:block;
  height:100%;
  width:100%;
}

Fügen Sie schließlich nach Bedarf weitere Stile hinzu.

Fügen Sie einfach diesen Abfragecode in den Kopfbereich Ihres HTML ein:

<!--[if lt IE 9 ]>
     <script>
        $(document).ready(function(){
            $('a > button').click(function(){
                window.location.href = $(this).parent().attr('href');
            });
        });
    </script>
<![endif]-->

Warum konvertieren Sie nicht einfach alle <button>in <span>mit type="button"und stylen dann mit Ihren normalen CSS-Schaltflächenklassen? Ich habe gerade bestätigt, dass dies in IE11 funktioniert.