可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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]

回答2:

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%;
}

回答3:

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

HTML link with padding and CSS style active does n

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮