47

完全に困惑！text-decoration: noneいくつかの異なる方法で行を書き直そうとしました。テキストをターゲットにしてサイズを変更することもできましたが、text-decoration: noneコードはかかりません。

大変助かりました。

コード

.widget    
{
     height: 320px;
     width: 220px;
     background-color: #e6e6e6;
     position: relative;                              
     overflow: hidden;                          
}


.title    
{
     font-family: Georgia, Times New Roman, serif;
     font-size: 12px;
     color: #E6E6E6;
     text-align: center;
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: #4D4D4D;    
     position: absolute;
     top: 0;
     padding: 5px;
     width: 100%;
     margin-bottom: 1px;
     height: 28px;
     text-decoration: none;
}

a .title    
{
     text-decoration: none;
}
<a href="#">
    <div class="widget">  
        <div class="title">Underlined. Why?</div>  
    </div>
</a>

4

14 に答える 14

43

インライン要素 (a) 内にブロック要素 (div) があります。これは HTML 5 では機能しますが、HTML 4 では機能しません。つまり、実際に HTML 5 をサポートするブラウザーのみです。

ブラウザーが無効なマークアップに遭遇した場合、ブラウザーはそれを修正しようとしますが、ブラウザーによって修正方法が異なるため、結果はさまざまです。ブロック要素をインライン要素の外に移動するブラウザもあれば、無視するブラウザもあります。

于 2012-07-10T19:00:36.610 に答える
10

CSS 疑似クラスを使用して、タグにクラスを指定します。次に例を示します。

<a class="noDecoration" href="#">

これをスタイルシートに追加します。

.noDecoration, a:link, a:visited {
    text-decoration: none;
}
于 2013-12-20T11:24:46.810 に答える
3

text-decoration: none;a:hover css に配置してみてください。

于 2014-01-26T14:47:50.177 に答える
2

答えがあります：

<a href="#">
    <div class="widget">  
        <div class="title" style="text-decoration: none;">Underlined. Why?</div>  
    </div>
</a>​

できます。

于 2014-12-22T06:53:13.260 に答える
1

「text-decoration: none;」を削除しても下線がありません。あなたのコードから。しかし、私も似たような経験をしました。

次に、コードを追加しました

a{
 text-decoration: none;
}

と

a:hover{
 text-decoration: none;
}

したがって、:hover を使用してコードを試してください。

于 2016-10-13T05:43:39.810 に答える
0

これをスタイルシートに追加してみてください：

a {text-decoration:none;}
于 2012-07-10T18:59:49.360 に答える
0

以下のコードを使用して、Chrome で動作するようにしました。ネスティングを調整できます。

a:-webkit-any-link { color: black; }
于 2016-04-18T05:13:58.103 に答える