即使將文字修飾設置爲無，鏈接仍然帶有下劃線

我在此網站上看到了一些相關問題，但所有這些問題似乎都是由於選擇器問題引起的，但我不認爲這是問題在這裏。
就我而言，Google Chrome和Safari都告訴我，a標籤的計算樣式有text-decoration:none。
選擇a標籤和設置text-decoration:none沒有區別，因爲它們已經有text-decoration:none。
頁面的樣式來自幾個不同的樣式表，其中一個來自我的博客主題，一個來自Materialize框架的namespaced import，最後一個用戶定義的樣式表，我離開爲空（因此我沒有在此包含CSS後）。即使將文字修飾設置爲無，鏈接仍然帶有下劃線

演示：http://codepen.io/prashcr/pen/RaBKGY

下面是HTML：

<body class="site animated fade-in-down"> 
    <div class="site-wrap center"> 

    <div class="post p2 p-responsive wrap" role="main"> 
     <div class="measure"> 
     <div class="mcss"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col s12 m7"> 
     <div class="card"> 
      <div class="card-image waves-effect waves-block waves-light"> 
      <img class="activator" src="http://materializecss.com/images/office.jpg"> 
      </div> 
      <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4"> 
       Kanban<i class="material-icons right">more_vert</i> 
      </span> 
      <p><a href="#!">This is a link</a></p> 
      </div> 
      <div class="card-action"> 
      <a href="#">This is a link</a> 
      <a href="#">This is a link</a> 
      </div> 
      <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4"> 
       Card Title<i class="material-icons right">close</i> 
      </span> 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
      </div> 
     </div> 
     </div> 
     <div class="col s12 m5"> 
     <div class="card"> 
      <div class="card-image waves-effect waves-block waves-light"> 
      <img class="activator" src="http://materializecss.com/images/office.jpg"> 
      </div> 
      <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4"> 
       Camper News<i class="material-icons right">more_vert</i> 
      </span> 
      <p><a href="#!">This is a link</a></p> 
      </div> 
      <div class="card-action"> 
      <a href="#">This is a link</a> 
      <a href="#">This is a link</a> 
      </div> 
      <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4"> 
       Card Title<i class="material-icons right">close</i> 
      </span> 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

     </div> 
    </div> 
    </div> 
</body>

來源

2016-04-22 Prashanth Chandra

這不是一個文字修飾存在。這是一個背景圖像。 Chrome瀏覽器開發工具顯示了這個：

a { 
    color: #0076df; 
    background-image: linear-gradient(to top, transparent 13%, rgba(0, 118, 223, 0.8) 13%, rgba(0, 118, 223, 0.8) 18%, transparent 17%); 
    text-shadow: white 1px 0px 0px, white -1px 0px 0px; 
}

當我禁用開發工具background-image財產，藍線消失。

來源

2016-04-22 05:02:38 Julia

你打我由像20秒，@Julia。 –

和我約10秒多：P好的工作（或好的速度） –

最後，一旦我成功地寫出答案第一：D – Julia

添加background-image: none;到.mcss a

.mcss a { 
    color: #039be5; 
    text-decoration: none; 
    background-image: none; 
}

來源

2016-04-22 05:06:04

好吧，也許這將幫助你

.mcss a:active, .mcss a:hover {background-image: none;} .mcss a {color: #039be5;background-image: none;text-decoration: none;}

來源

2016-04-22 05:12:31

即使將文字修飾設置爲無，鏈接仍然帶有下劃線

回答

相關問題