爲什麼<a>標籤與不可點擊區域重疊？

我確認這種行爲僅發生在MacBook Pro上。事實上，它的父母外面的「流血」隨處可見，但除了MacBook Pro之外，這不是一個問題，只有幾個像素。爲什麼<a>標籤與不可點擊區域重疊？

我有一個謎，我目前無法解決。使用： Bootstrap 3 +一些自定義樣式。

我有一個電話號碼應該是可點擊的，並且下面的消息不應該是。但是，<span>或<a>標籤正在其容器外，並以某種方式重疊常規文本「*立即訂購」。我選擇的標記在Chrome開發者工具，這就是下面的圖片顯示：

這裏的jsfiddle此代碼： https://jsfiddle.net/h1syL6hz/

下面是完整的代碼：

<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    <title>Test</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <style> 
 
     body { 
 
    font-size: 16px; 
 
    font-family: 'Oxygen', sans-serif; 
 
    background-color: blue; 
 
} 
 

 
#header-nav { 
 
    background-color: green; 
 
    border-radius: 0; 
 
    border: 0; 
 
} 
 

 
#nav-list a { 
 
    color: blue; 
 
    text-align: center; 
 
} 
 
#nav-list a span { 
 
    font-size: 1.8em; 
 
} 
 

 
#phone { 
 
    margin-top: 5px; 
 
} 
 
#phone a { 
 
    text-align: right; 
 
    padding-bottom: 0; 
 
} 
 
#phone div { /* Order */ 
 
    color: blue; 
 
    text-align: right; 
 
    padding-right: 15px; 
 
} 
 

 
    </style> 
 
    </head> 
 

 
<body> 
 
    <header> 
 
    <nav id="header-nav" class="navbar navbar-default"> 
 
     <div class="container"> 
 
     <ul id="nav-list" class="nav navbar-nav navbar-right"> 
 
      <li> 
 
      <a href="#"> 
 
       <span class="glyphicon glyphicon-info-sign"></span><br>Nav 1 
 
      </a> 
 
      </li> 
 
      <li> 
 
      <a href="#"> 
 
       <span class="glyphicon glyphicon-info-sign"></span><br>Nav 2 
 
      </a> 
 
      </li> 
 
      <li> 
 
      <a href="#"> 
 
       <span class="glyphicon glyphicon-info-sign"></span><br>Nav 3 
 
      </a> 
 
      </li> 
 
      <li id="phone"> 
 
      <a href="tel:555-555-5555"> 
 
       <span>555-555-5555</span></a><div>* Order Now</div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </header> 
 
    
 
    
 
    <h1>Hello World!</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi atque, nostrum, nihil labore pariatur ea incidunt voluptate porro fugit, a voluptates quibusdam provident nam rerum nesciunt necessitatibus quos velit distinctio.</p> 
 
    
 
    <!-- jQuery (Bootstrap JS plugins depend on it) --> 
 
    <script src="js/jquery-2.1.4.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
</body> 
 
</html>

任何幫助將非常感激。無法弄清楚爲什麼會發生這種情況。

來源

2015-10-16 user1902183

請，提供的jsfiddle – Alex

我剛添加的鏈接的jsfiddle。謝謝。 – user1902183

您在哪個瀏覽器版本中遇到此問題？您是否可能安裝了可以操縱_phone links_的擴展程序？像Skype或類似的。 –

我已經複製粘貼jsbin你的代碼，我沒有看到你說的..這裏是output這裏也是一個截圖..

我並沒有改變任何代碼

仍，如果你想改變比你可以添加padding-top: 10px;到CSS類#phone div

我也看到了你的小提琴，在這裏是截圖：

不過，如果你得到那麼任何問題給中要檢查你的瀏覽器詳細..

來源

2015-10-16 05:13:44 Sachin

我剛剛提供了jsfiddle，您可以在其中看到問題。 – user1902183

我在Mac上使用Chrome：版本46.0.2490.71（64位）。我沒有爲電話號碼安裝任何特殊功能。爲了以防萬一，我將「tel：555 -....」更改爲普通的http://somelink.com，這是一樣的行爲。剛試過Firefox。一樣。不知道爲什麼你沒有看到它。嘗試將鼠標放在「*立即訂購」上，從底部開始（藍色部分）並將鼠標移向標題部分。你現在看到它變成了一個準備點擊的指針，而它仍然在「*立即訂購」之上嗎？ – user1902183

這太奇怪了。我只是在另一臺Mac上嘗試過，它與我的其他機器具有完全相同的開發設置，並且問題不在那裏......確切地說，這是在那裏，但以非常有限的方式。如果您檢查標記，它將從20px的引導程序繼承行高。這比1.8em的文本（基本爲16px）要小。因此，如果刪除該線高度，則不會發生跨度的微小泄漏。然而，無論如何，我仍然不明白爲什麼會出現如此巨大的跨度流血......任何想法？我可以嘗試重新安裝Chrome，但不確定這樣做。 – user1902183

爲什麼<a>標籤與不可點擊區域重疊？

回答

相關問題