{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爱情/是我丢掉的垃圾 的问题《HTML link with padding and CSS style active does n》','https://www.manongdao.com/q-633569.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
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:
Try changing the padding with margin, As the padding is changed element position changes as well.
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
EDIT: :hover works instead :active because of the reason as element does not change position between time pressed and time released
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 nodewhich is a child of theanchortag. Thistext nodethen moves away, so that the mouseup event target is simply theanchortag itself.With :hover, the text node moves away before you click, so the mousedown event target is the
anchortag, and the mouseup event is also theanchortag, so the link is followed.[/Edit]