HTML link mit Polsterung und CSS-active funktioniert nicht

HTML-link mit Polsterung und CSS-active funktioniert nicht in Google Chrome, Apple Safari, Opera, Mozilla Firefox. Aber es funktioniert in Internet Explorer 8.

Hier ist ein Beispiel code. Versuchen Sie, klicken Sie auf Stapel - link nicht funktioniert, klicken Sie auf die Überlauf - link funktioniert. Durch die Werke, die ich meine - navigieren Sie zu StackOverflow-Seite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>css active padding href problem</title>
        <style type="text/css">
            a{
                display: inline-block;
                background:#CCC;
                border:1px solid #666;
                padding:0 35px 0 0;
            }
            a:active{
                padding:0 0 0 35px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Click on <i>Stack</i> - href does not work.
               Click on <i>Overflow</i> - href works.
               All browsers are affected.
               Except IE.</p>
            <a href="http://stackoverflow.com/">StackOverflow</a>
        </div>
    </body>
</html>

Warum es nicht funktioniert in den meisten Browsern?

Edit 2: Wenn Sie ändern :aktiv :hover, dann alles wie erwartet funktioniert in allen Browsern auf passiert und der Browser navigiert zu stackoverflow.com

Edit 3: Zu beweisen, dass es möglich ist, klicken Sie auf Polsterung Bereich, den Sie ändern können, Stil:

<style type="text/css">
    a{
        padding:0 0 0 35px;
    }
</style>

Wenn link "bewegt", als jemand erwähnte, dann warum ist es möglich, klicken Sie auf bereits "verschoben" - link?

Aktualisiert code - Hinzugefügt, hintergrund und Rahmen zu klären, das Objekt nicht zu bewegen.

InformationsquelleAutor Maris B. | 2010-11-25

1

Mit Polsterung, der text bewegt sich Weg von, wo Sie geklickt haben. Dies ist dein code:
http://jsfiddle.net/ctrlfrk/3KsRx/

halten Sie die Maus-Taste auf den Stapel, und Sie werden sehen, dass der text bewegt sich Weg von der unter der Maus.

Was wollen Sie erreichen? Dies ist so zu arbeiten, wie es sollte. Wenn internet explorer folgt dem link, dann ist es falsch.

[Bearbeiten]
Klärung:

Das eigentliche problem ist hier, dass ein "click" - Ereignis scheint nur ausgelöst wird, wenn das mousedown-Ereignis Ziel entspricht, das mouseup-Ereignis-Ziel.
Wenn Sie klicken Sie auf den text in deinem Beispiel, wird das mousedown-Ziel ist ein text node was ist ein Kind der anchor tag.
Diese text node dann Weg bewegt, so dass das mouseup-Ereignis-Ziel ist einfach die anchor tag selbst.

Mit :hover text-node bewegt sich Weg, bevor Sie klicken, so dass das mousedown-Ereignis Ziel ist die anchor tag, und das mouseup-Ereignis ist auch die anchor tag, also dem link gefolgt wird.

[/Edit]
- Text bewegt sich Weg, aber der hintergrund und die Grenze nicht. Sagen Sie, dass der Anker kann nur text sein, und nicht der padding-Bereich? Auch bedeutet dies nicht erklären :hover
- Ich bearbeitet habe, die Antwort mit der wahrscheinlichen Ursache des Problems.
- Gerade getestet, und entfernen text von der Anker in der Tat löst das problem.
InformationsquelleAutor david
4

Ich habe eine Lösung gefunden!
http://jsfiddle.net/rydl/Yu6vp/3/

David hat Recht, das problem wird verursacht durch das verschieben von text-Knoten. Also die Lösung muss verhindert werden, dass der text-Knoten wird geklickt überhaupt. Ich benutzte die Anker und die :after-pseudo-element auf die gesamte Schaltfläche, während Sie unsichtbar:
```
a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  height: 100%;
  width: 100%;
}
```
- Genial! Arbeitete für mich 🙂
- Ich hatte ein ähnliches Problem mit dem drücken der Maus auf einen link, aber etwas bewegen des Cursors. In diesem Fall Browser manchmal dachte ich ziehen möchten, und klicken Sie nicht auslösen. Vielen Dank für diese!
- beste Antwort ever : ich benutze ein :active-status, die ein etwas anderes layout (z.B. 1px weniger für padding-top für die Simulation von 3D-Lücke drücken), und so war die 2 horizontalen Linie, die Gebiete von 1px, hinter und unter link-label (aber innerhalb der link-Bereich), wo Sie auf hat nicht funktioniert, versucht zu spielen mit line-height statt, etc, gleichen. Aber dieses clevere behebt das normal/aktiv-Klick-Bereich Probleme endgültig.
InformationsquelleAutor criedel
0

Versuchen Sie, die Polsterung mit Rand, Wie die Polsterung wird geändert element position verändern.
```
a {
    margin:0 0 0 35px;
}
```
Browser(firefox,chrome etc) Eine gültige Mausklick ist eine, die gedrückt und losgelassen werden auf dasselbe element.

EDIT: ich kann nicht ändern das Verhalten der browser (keine Lösung in reinem css), aber Sie können javascript verwenden, um dies getan
```
<a href="http://stackoverflow.com/" onmousedown="window.location=this;">StackOverflow</a>
```
EDIT: :hover Werken statt :active, weil der Grund als element nicht ändern position zwischen Zeit gedrückt und die Zeit veröffentlicht
- Sie verwenden sollten, margin statt padding (ändern von element-position ist das Problem)
- Finden Sie in den aktualisierten code. Mit Polsterung Objekt nicht bewegen. Bei der Verwendung von margin - Objekt bewegt. Ich brauche Polsterung.
- onmousedown funktioniert, aber es ist nicht benutzerfreundlich. onmouseup auch funktioniert, und es hat den Nebeneffekt, dass Sie überall klicken und loslassen auf den Anker. onclick ist sehr wünschenswert - aber es funktioniert nicht. Warten immer noch für die bessere Lösung. Derzeit onmouseup, scheint die beste Abhilfe. Danke.
InformationsquelleAutor Ish

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.