爲什麼我的鏈接添加在「隨機」位置

下劃線僅使用HTML和CSS，當我使用a標籤是用前綴它一個_爲什麼我的鏈接添加在「隨機」位置

我想我已經使用了content標籤的一些地方，但令我驚訝的是，它堅持在JSFIDDLE

<section> 
    <h3>Activity</h3> 
    <a href="#"> 
      <div class="activity"> 
      <div>Some</div> 
      <div>> 198 days?</div> <!-- why does this render as _> 198 days? --> 

      <div>Progressing</div> 
     </div> 
    </a> 
    <br /> 
    <a href="#">> does not have underscore despite having > </a> 
</section>

CSS

.activity { 
    background: #3ea18f; 
    clear: both; 
    margin-bottom: 2%; 
    border-radius: 4px; 
    padding-left: 10%; 
} 
.activity div { 
    width: 33%; 
    display: inline-block; 
}

結果

卸下a標籤可以解決問題，但是，我需要的a標籤

同樣，除去CSS .activity div還刪除_但顯然我需要的風格

同問題依然存在如果我使用<div>> 198 days?</div>

來源

2015-09-27 Dave

你在使用文字'>'和'<'嗎？嘗試使用http://www.tutorialspoint.com/html5/html5_entities.htm – user993553

@ user993553，我知道這一點，對不起，我沒有說清楚 - 雖然同樣的問題仍然存在 – Dave

這是鏈接文字裝飾，但爲什麼你需要很多html裏面的aa？ – user993553

我不知道它是這個行爲的意圖還是它是一個渲染錯誤。

在div與_的前面有一個空間，因爲你有一個新的生產線，如果你周圍添加的所有元素的outline（updated fiddle），你看到_是兩個元素之間。

如果添加另一個元素（next fiddle），則會看到另一個元素_。所以下劃線出現在該行的所有inline-block元素之間。

該問題與>無關。

要避免此問題而不更改其餘的外觀，您可以將text-decoration加到none到周圍的a。

前面沒有> does not have underscore despite having >，因爲<a href="#">和> does not之間沒有空格。

來源

2015-09-27 08:43:46

<section> 
    <h3>Activity</h3> 
    <a href="#"> 
      <div class="activity"><div>Some</div><div>> 198 days?</div><div>Progressing</div> 
     </div> 
    </a> 
    <br /> 
    <a href="#">> does not have underscore despite having > </a> 
</section>

https://jsfiddle.net/y4zpgkfe/

來源

2015-09-27 08:43:30 user993553

爲什麼我的鏈接添加在「隨機」位置

回答

相關問題