帶有填充和CSS樣式活動的HTML鏈接不起作用
[英]HTML link with padding and CSS style active does not work
問題描述
帶有填充和CSS樣式的HTML鏈接無法在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 to：hover，那么所有瀏覽器中的一切都按預期工作 - 點擊發生，瀏覽器導航到stackoverflow.com
編輯3：要證明可以單擊填充區域，您可以將樣式更改為：
<style type="text/css">
a{
padding:0 0 0 35px;
}
</style>
如果鏈接“移動”有人提到，那么為什么可以點擊已經“移動”的鏈接？
3 個解決方案
解決方案1
4 2013-02-26 22:58:10
我找到了解決方案！ http://jsfiddle.net/rydl/Yu6vp/3/
大衛是對的，問題是由移動的文本節點引起的。 因此，解決方案必須完全阻止文本節點被點擊。 我使用了錨點：after-pseudo-element來覆蓋整個按鈕，同時是不可見的：
a:after {
position: absolute;
top: 0;
left: 0;
content: ' ';
height: 100%;
width: 100%;
}
解決方案2
1 已采納 2010-11-25 20:56:16
使用填充，文本會從您單擊的位置移開。 這是你的代碼： http ： //jsfiddle.net/ctrlfrk/3KsRx/
按住“堆棧”上的鼠標按鈕，您將看到文本遠離鼠標下方。
你想要實現什么目標？ 這是應該的方式。 如果Internet Explorer遵循鏈接，那么它是錯誤的。
[編輯]澄清：
這里真正的問題是，如果mousedown事件目標與mouseup事件目標匹配，則“click”事件似乎才會觸發。 當您單擊示例中的文本時，mousedown目標是一個text node ，它是anchor標記的子text node 。 然后， text node移開，以便mouseup事件目標只是anchor標記本身。
使用：hover，文本節點在您單擊之前移開，因此mousedown事件目標是anchor標記，mouseup事件也是anchor標記，因此遵循鏈接。
[/編輯]
解決方案3
0 2010-11-25 20:11:16
嘗試使用邊距更改填充，因為填充更改元素位置也會更改。
a {
margin:0 0 0 35px;
}
瀏覽器（firefox，chrome等）有效的鼠標點擊是在同一元素上按下並釋放的鼠標。
編輯：我無法改變瀏覽器的行為（ 純css中沒有解決方案 ），但您可以使用javascript來完成此操作
<a href="http://stackoverflow.com/" onmousedown="window.location=this;">StackOverflow</a>
編輯:: hover工作：激活因為元素不會在按下的時間和釋放時間之間改變位置
css 填充，浮動在 html 一個標簽中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.