1. ホーム
  2. css

[解決済み】Text-decoration: noneが機能しない。

2022-02-03 19:30:44

質問

全くもって困惑しています。を書き換えてみました。 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>

解決方法は?

インライン要素(a)の中にブロック要素(div)が入っています。これはHTML 5では動作しますが、HTML 4では動作しません。したがって、実際にHTML 5をサポートしているブラウザのみでも動作します。

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