<html>タグを追加するとCSSが動作しない

文書の先頭に<!DOCTYPE html>を追加すると、この移行はもう機能しません。どうして？<html>タグを追加するとCSSが動作しない

これは、（Chromeとマイクロソフトエッジで）動作します。

<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .container{ 
      width: 400px; 
      margin-left: auto; 
      margin-right: auto; 
      background-color: #9FC; 
     } 
     .gradBox { 
      width: 300px; 
      height: 100px; 
      margin-right: auto; 
      margin-left: auto; 
      margin-top: 20px; 
      margin-bottom: 20px; 
      border-top-left-radius: 15px; 
      border-top-right-radius: 15px; 
      -webkit-transition: width 1s; 
      transition: width 1s; 
     } 
     .gradBox:hover { 
      width: 400; 
     } 
     #grad1 { 
      background: linear-gradient(to right, #F00 1%, #FF0 25%, #0F0 50%, #0FF 75%, #00F 100%) 
     } 
    </style> 
</head> 
<body> 
<div class="container"> 
    <div class="gradBox" id="grad1">  
    </div> 
</div> 
</body> 
</html>

これは、どちらかでは動作しません：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    ... (the rest of the markup is identical)

出典

2016-05-24 Folo

どちらも私にとってうまくいくようです。 – thepio

両方のコードサンプルが同じですか？ – since095

@ since095：2番目の例ではHTML5を使用しています。 – WorkWe

あなたはホバー上の幅にユニットを宣言する必要があります。

.gradBox:hover { 
    width: 400px; 
}

最初のCSS宣言でピクセルを使用していたため、ホバーでも使用されていました。私はそれがあなたの質問のタイプミスかどうかはわかりませんが、どちらのケースでもユニットなしではうまくいかないので、なぜ他の例がうまくいっているのか、他の例がそうでないのかを本当に伝えることはできません。

出典

2016-05-24 11:05:28 thepio

いいグリーフ...どうしたの？私は何が間違っていたのかを理解しようと、1時間の最高の部分を費やしました。 – Folo

Hehは、私たちの最高の状態になります。時には軽度の間違いが隠れていることを知っています。 – thepio

ホバーセクションのピクセルがありません

出典

2016-05-24 11:35:50 Susha

<html>タグを追加するとCSSが動作しない

答えて

関連する問題