wake-up-neo.com

Button innerhalb des Ankerlinks funktioniert in Firefox aber nicht im Internet Explorer?

Alles andere auf meiner Website scheint mit allen Browsern außer meinen Links kompatibel zu sein. 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>
71
Jason

In einem <button> - Element darf kein <a> - Element enthalten sein. As Beschreibung des Inhaltsmodells von W für das Element <a> Lautet:

msgstr "Es darf keinen Nachkommen von interaktivem Inhalt geben."

(a <button> gilt als interaktiver Inhalt )

Um den gewünschten Effekt zu erzielen, können Sie die <a> - Tags weglassen 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 überlegen Sie sich , dies nicht zu tun . Es gibt einen Grund, warum reguläre Links so funktionieren:

  • 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

Darüber hinaus müssen Sie JavaScript nicht unbedingt aktivieren, um eine einfache Navigation durchführen zu können. Dies ist ein so grundlegender Aspekt des Webs, dass ich eine solche Abhängigkeit für inakzeptabel halte.

Sie können Ihre Links nach Wunsch mit einem Hintergrundbild oder einer Hintergrundfarbe, einem Rahmen und anderen Techniken gestalten, sodass sie wie Schaltflächen aussehen , jedoch unter dem deckt, sollten sie normale Links sein.

85
Rob

Nur eine Notiz:
W3C hat kein Problem mit der Schaltfläche innerhalb des Link-Tags, daher handelt es sich nur um einen weiteren MS-Substandard.

Antwort:
Verwenden Sie die Ersatzschaltfläche, es sei denn, Sie möchten ein Vollbild anzeigen.

Die Ersatzschaltfläche kann in ein 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 - ein Teil des CSS-Codes treibt alle Instanzen an - definieren Sie CSS nur einmal und von diesem Punkt an kopieren Sie die HTML-Instanz und fügen Sie sie ein, wo immer Ihr Code dies erfordert.

Jeder Button kann eine eigene Beschriftung haben - ideal für mehrsprachige Seiten (einfacher als das Erstellen von Bildern für jede Sprache - glaube ich) - und ermöglicht es außerdem, Instanzen in Ihrem gesamten Skript einfacher zu verbreiten.

Passt die Breite an die Etikettenlänge an - nimmt auch eine feste Breite an, wenn Sie dies wünschen.
IE7 ist eine Ausnahme von oben - es muss eine Breite haben oder macht diese Schaltfläche von Kante zu Kante - alternativ zur Angabe der Breite können Sie die Schaltfläche nach links verschieben
- CSS für IE7:
ein. Breite: 150px; (notieren Sie sich den Punkt vor der Eigenschaft, normalerweise ziele ich auf IE7, indem ich einen solchen Punkt hinzufüge - Punkt entfernen 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 Link-Zeiger korrekt anzuzeigen - gute Browser brauchen es nicht

Sie können diesen Code weiterentwickeln und CSS3 verwenden, um ihn zu formatieren, anstatt Bilder zu verwenden:
ein. Radius für runde Ecken (Einschränkung: IE zeigt sie quadratisch an)
b. Farbverlauf, um ihn "schaltflächenartig" zu gestalten (Einschränkung: opera unterstützt keine Farbverläufe, stellen Sie also die Standard-Hintergrundfarbe für diesen Browser ein)
c. Verwenden Sie: Hover-Klasse, um den Schaltflächenzustand abhängig von der Position des Mauszeigers usw. zu ändern. Sie können ihn nur auf die Textbeschriftung oder auf 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 below (button instance):

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>
19
Jeffz
$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed
15
Kalmár Gábor

Der folgende Code funktioniert in allen Browsern einwandfrei:

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

In einem a -Tag darf keine Schaltfläche enthalten sein. Sie können jedoch JavaScript aktivieren, damit es funktioniert.

12
Daniel A. White

Wenn Sie ein Framework wie Twitter bootstrap) verwenden, können Sie einem Tag einfach die Klasse "btn" hinzufügen. Ich hatte gerade einen Anruf von einem Benutzer wegen dieses Problems, anscheinend war mein Checkout-Button nicht Ich arbeite, weil ich eine Schaltfläche in einem Tag hatte. Stattdessen habe ich die BTN-Klasse hinzugefügt und sie funktioniert jetzt perfekt. Ein großer Fehler, der wahrscheinlich Kunden gekostet hat. Manchmal vergesse ich, den Code zu überprüfen. Alles funktioniert im IE ..

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

9
PatrickCurl

Da dies nur ein Problem in IE ist, um dieses Problem zu beheben, stelle ich zuerst fest, ob der Browser IE) ist, und verwende in diesem Fall ein jquery click-Ereignis. Ich füge diesen Code in eine globale Datei ein so ist es auf der ganzen Website behoben.

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 IE Klickereignisse zuzuweisen. Hinweis: Der obige Code befindet sich in einer dokumentenbereiten Funktion, um sicherzustellen, dass die Seite vollständig geladen ist, bevor Klickereignisse zugewiesen werden.

Ich habe meinen Eingabetasten auch Klassennamen zugewiesen, um bei der Verwendung von IE) Overhead zu sparen, damit ich 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}
6
Francis Lewis

ich fand, dass dies für mich funktioniert

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

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

2
Mani Deepak

Das Problem hierbei ist, dass sich der Link hinter dem Button befindet, auch wenn der Z-Index geändert wird. Dieses Markup ist auch ungültig ( lies 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, das Markup zu ändern.

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

Dann nach Bedarf stylen. Eine Demo ist hier .

1
lukeocom

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 Anker-Tag in ein Element vom Typ Block und füllen Sie seinen Container

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

Fügen Sie gegebenenfalls weitere Stile hinzu.

1
Ryan Tuosto

fügen Sie einfach diesen JQuery-Code in Ihren HTML-Kopf ein:

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

Warum konvertieren Sie nicht einfach alle <button> bis <span> mit type="button" und dann mit Ihren normalen CSS-Button-Klassen stylen? Nur bestätigt, dass dies in IE11 funktioniert.

0
sabaeus