HTML链接与填充和CSS样式活动不工作 [英] HTML link with padding and CSS style active does not work
问题描述
HTML填充和CSS样式活动的链接在Google Chrome，Apple Safari，Opera和Mozilla Firefox中无法使用。但是，它在Internet Explorer 8中可用。
这是一个示例代码。尝试点击堆栈 - 链接不工作，点击溢出 - 链接工程。
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // EN
http://www.w3.org/TR/html4/strict.dtd\">
< html>
< head>
< title> css active padding href问题< / 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>点击< i>堆栈< / i> - href不工作。
点击< i>溢出< / i> - href工作。
所有浏览器都受到影响。
除IE外。< / p>
< a href =http://stackoverflow.com/> StackOverflow< / a>
< / div>
< / body>
< / html>
为什么在大多数浏览器中无法使用？
编辑2：如果您将以下内容更改为：active：hover，则所有浏览器中的一切都会正常工作 - 点击发生，浏览器导航到stackoverflow.com
编辑3：要证明可以点击填充区域，您可以将样式更改为：
< style type =text / css>
a {
padding：0 0 0 35px;
}
< / style>
如果链接移动为某人提到的，那么为什么可以点击已经链接？
使用填充，文本会远离您单击的位置。这是您的代码：
http://jsfiddle.net/ctrlfrk/3KsRx/
按住'Stack'上的鼠标按钮，您将看到文本从鼠标下方移开。
你想实现什么？这是工作的方式它应该。
澄清：
这里真正的问题是，如果mousedown事件目标匹配mouseup事件目标，'点击'事件似乎只触发。
当您点击示例中的文本时，mousedown目标是文本节点，它是锚标记。
这个文本节点然后离开，所以mouseup事件目标只是 anchor 标签本身。
使用：hover，文本节点在您单击之前移开，因此mousedown事件目标是 anchor ，并且mouseup事件也是 anchor 标记，因此链接之后。
[/ Edit] / p>
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]
这篇关于HTML链接与填充和CSS样式活动不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
