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

72

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>
Dijkgraaf
quelle

Antworten:

87

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.

rauben
quelle
Wow, ich habe das meiste davon ein bisschen über meinem Kopf gefangen ... Wenn ich es richtig verstehe, verwende ich entweder Bilder für die Schaltflächen oder verwandle sie einfach in gewöhnliche Links, oder?
@Jason Ja, normalerweise verwenden Sie ein Bild für einen Link oder gestalten den normalen Textlink mithilfe von CSS.
Will Eddins
23
Warum kannst du keinen Knopf in einem haben? Andere Antworten sagen, dass Sie können, bitte verlinken Sie zu Regel oder ähnlichem!
Markus
7
"Sie können keinen <Button> in einem <a> -Element haben." Sagt wer? Es funktioniert gut in fast jedem Browser, sogar IE9. Die Inkompetenz von Microsoft schreibt keine Webstandards mehr vor.
Cerin
2
Es ist nur durch Auslassung gültig. Verschachtelte Links und Schaltflächen hatten nie ein definiertes Verhalten. Es ist dieselbe Argumentation, nach der verschachtelte Links nicht zulässig sind.
Odin
19

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>
Jeffz
quelle
1
Die HTML-Validator-Erweiterung für Firefox erzeugt Fehler, wenn ich eine Schaltfläche in ein Ankertag einfüge:line 36 column 84 - Warning: inserting implicit <a> line 36 column 93 - Warning: discarding unexpected </button> line 36 column 53 - Warning: missing </button> line 36 column 37 - Warning: missing </a> before </div>
Mike
2
Der erste Satz ist nicht wahr. <Button> und <Eingabe> innerhalb eines Links sind in der HTML-Spezifikation nicht zulässig.
Odin
Ich möchte darauf hinweisen, dass das HTML-Markup hier abscheulich und eine inakzeptable Lösung für jeden ist, der wartbare Inhalte schreiben möchte. Es ist schwierig, sich einmal an diese Syntax zu erinnern, geschweige denn an andere Hacks, die Sie möglicherweise verwenden. Wenn Sie IE 8 unterstützen müssen, kann es hilfreich sein, das von IE 8 unterstützte Markup zu verwenden. Nenn mich altmodisch. Aber ich mag Code, der funktioniert, nicht Code, der vorgibt, etwas zu sein, was er nicht ist.
Dudewad
Eigentlich sollte es Ihnen gefallen, weil es funktioniert - was auf der ganzen Linie Ihrer Argumentation liegt.
Jeffz
15
$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed
Kalmár Gábor
quelle
8
Für diejenigen, die sich fragen, scheint dies ein bisschen Code zu sein, der veraltete jQuery-Funktionen verwendet. Bei aktuellen Versionen von jQuery müssen Sie .live durch .on ersetzen. Wenn Sie stattdessen prototypejs verwenden, beginnen Sie mit der Funktion $$.
Eric
Eine Schaltfläche in einem Link ist kein gültiger HTML-Code und weist ein undefiniertes Verhalten auf.
Odin
Ich habe Probleme damit in IE8
Dusty
Welche Version von jQuery verwenden Sie? Was ist das genaue Problem?
Kalmár Gábor
13

Der folgende Code funktioniert in allen Browsern einwandfrei:

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>
Chris H.
quelle
2
Dies ist jedoch nicht sehr gut für die Suchmaschinenoptimierung. Nicht empfohlen, wenn die Seite, auf die verlinkt wird, einen hohen Rang erhalten soll.
pkout
12

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

Daniel A. White
quelle
1
Was lustig ist, ich habe es wie vor 12 Jahren versucht, als ich HTML lernte. Heh.
Daniel A. White
20
Gibt das W3C vor, dass Sie keine Schaltfläche in einem Anker haben können, oder handelt es sich nur um eine Microsoft-Implementierung?
James McMahon
2
Schlechte Microsoft-Implementierung, auch allgemein schlechte Praxis. Es gibt nichts in der Spezifikation, was vorschreibt, dass Schaltflächen nicht in Links eingefügt werden können, aber schlechte Praxis, da Sie zwei konkurrierende Ereignisse haben, die auftreten müssen, wenn ein Benutzer darauf klickt - drückt er die Schaltfläche oder folgt er dem Link? Dies verwirrt den Internet Explorer (zusammen mit vielen anderen Dingen!) Und ist ein sehr guter Grund, dies nicht zu tun.
Ben Green
Es ist eine schlechte MSFT-Implementierung. Die Spezifikation für HTML5 besagt, dass das Ankertag als Blockelement fungieren kann.
Dudewad
9

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>

PatrickCurl
quelle
6

Ich fand, dass dies für mich funktioniert

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

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}
Francis Lewis
quelle
2

<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.

Mani Deepak
quelle
Beantwortet dies die Frage? Button inside of anchor link works in Firefox but not in Internet Explorer?
Ajeeb.KP
1

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 .

lukeocom
quelle
Dies funktioniert anscheinend nur in Chrome, nicht in Firefox oder IE
Jeff Puckett
speziell aus der HTML5-Schaltflächenspezifikation : "Es darf keinen Nachkommen für interaktive Inhalte geben ." Hier wird das Ankertag als erstes Beispiel aufgeführt.
Jeff Puckett
1

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.

Ryan Tuosto
quelle
Dies funktioniert anscheinend nur in Chrome, nicht in Firefox oder IE
Jeff Puckett
speziell aus der HTML5-Schaltflächenspezifikation : "Es darf keinen Nachkommen für interaktive Inhalte geben ." Hier wird das Ankertag als erstes Beispiel aufgeführt.
Jeff Puckett
0

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]-->
user1447420
quelle
0

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.

Kelch gehalten
quelle