HTML-ссылка с активным отступом и стилем CSS не работает - PullRequest
Новая
       23

HTML-ссылка с активным отступом и стилем CSS не работает

7 голосов
/ 25 ноября 2010

HTML-ссылка с активным отступом и стилем CSS не работает в Google Chrome, Apple Safari, Opera, Mozilla Firefox.Тем не менее, он работает в Internet Explorer 8.

Вот пример кода.Попробуйте нажать на стек - ссылка не работает, нажмите на переполнение - ссылка работает.Под работами я имею в виду - перейти на сайт StackOverflow. 

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

Почему он не работает в большинстве браузеров?

Изменить 2: Если вы измените: active на:при наведении курсора все работает, как и ожидалось, во всех браузерах - происходит щелчок и браузер переходит на stackoverflow.com

Редактировать 3: Чтобы доказать, что можно щелкнуть область заполнения, можно изменить стильна: 

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

Если ссылка «перемещается», как кто-то упомянул, то почему можно нажать на уже «перемещенную» ссылку?

Ответы [ 3 ]

4 голосов
/ 27 февраля 2013

Я нашел решение!http://jsfiddle.net/rydl/Yu6vp/3/

Дэвид прав, проблема вызвана движущимся текстовым узлом.Таким образом, решение должно предотвращать щелчок текстового узла.Я использовал псевдоэлемент anchor: after, чтобы покрыть всю кнопку, оставаясь невидимым: 

a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  height: 100%;
  width: 100%;
}
1 голос
/ 25 ноября 2010

С отступом текст отходит от того места, где вы щелкнули. Это ваш код: http://jsfiddle.net/ctrlfrk/3KsRx/

удерживая кнопку мыши на стеке, вы увидите, что текст удаляется из-под мыши.

Чего ты пытаешься достичь? Это работает так, как должно. Если Internet Explorer переходит по ссылке, это неправильно.

[Изменить] Разъяснение:

Настоящая проблема здесь в том, что событие «щелчка» срабатывает только в том случае, если цель события mousedown соответствует цели события mouseup. Когда вы нажимаете на текст в вашем примере, цель mousedown - это text node, который является потомком тега anchor. Этот text node затем удаляется, так что целью события mouseup является просто сам тег anchor.

С помощью: hover текстовый узел удаляется перед щелчком, поэтому целью события mousedown является тег anchor, а событием mouseup также является тег anchor, поэтому следует ссылка.

[/ Изменить]

0 голосов
/ 25 ноября 2010

Попробуйте изменить отступ с полем, так как изменение отступа также меняет положение элемента. 

a {
    margin:0 0 0 35px;
}

Для браузеров (Firefox, Chrome и т. Д.). Допустимый щелчок мыши - нажатие .и выпущен на том же элементе .

РЕДАКТИРОВАТЬ: я не могу изменить поведение браузера ( нет решения в чистом CSS ), но вы можете использовать JavaScript, чтобы сделать это 

<a href="http://stackoverflow.com/" onmousedown="window.location=this;">StackOverflow</a>

РЕДАКТИРОВАТЬ: : вместо работает hover *: 1015 *: активен по причине , поскольку элемент не меняет положение между нажатым временем и отпущенным временем

...