HTML link with padding and CSS style active does not work

HTML link with padding and CSS style active does not work in Google Chrome, Apple Safari, Opera, Mozilla Firefox. However, it works in Internet Explorer 8.

Here is an example code. Try to click on Stack - link does not work, click on Overflow - link works. By works I mean - navigate to StackOverflow site.

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

Why it does not work in most Browsers?

Edit 2: If you change :active to :hover, then everything works as expected in all Browsers - click happens and Browser navigates to stackoverflow.com

Edit 3: To prove that it is possible to click on padding area you can change style to:

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

If link "moves" as someone mentioned, then why it is possible to click on already "moved" link?

With padding the text moves away from where you clicked. This is your code: http://jsfiddle.net/ctrlfrk/3KsRx/

hold down the mouse button on 'Stack' and you will see that the text moves away from under the mouse.

What are you trying to achieve? This is working the way it should. If internet explorer follows the link then it is wrong.

[Edit] Clarifying:

The real problem here is that a 'click' event only seems to fire if the mousedown event target matches the mouseup event target. When you click on the text in your example, the mousedown target is a text node which is a child of the anchor tag. This text node then moves away, so that the mouseup event target is simply the anchor tag itself.

With :hover, the text node moves away before you click, so the mousedown event target is the anchor tag, and the mouseup event is also the anchor tag, so the link is followed.

[/Edit]

I found a solution! http://jsfiddle.net/rydl/Yu6vp/3/

David is right, the problem is caused by the moving text-node. So the solution must prevent the text-node from being clicked at all. I used the anchor's :after-pseudo-element to cover the whole button, while being invisible:

a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: ' ';
  height: 100%;
  width: 100%;
}

Try changing the padding with margin, As the padding is changed element position changes as well.

a {
    margin:0 0 0 35px;
}

To browsers(firefox,chrome etc) A valid mouse click is one which is pressed and released on same element.

EDIT: I cant change the behavior of browser (no solution in pure css), but you can use javascript to get this done

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

EDIT: :hover works instead :active because of the reason as element does not change position between time pressed and time released

来源：https://stackoverflow.com/questions/4280522/html-link-with-padding-and-css-style-active-does-not-work

标签

html

css

anchor

padding