doctype htmlの幅/境界の半径が正しく動作しない

最近、（<!DOCTYPE html>タグを使用して）HTML5のWebページを構築しようとしていましたが、DOCの境界線を中心にページを作成しました。それは流動的でしたが、それなしでは大丈夫でした。私は何を間違えているのだろうと思っていたのですか？ doctypeをどのように組み込んで動作させることができますか？doctype htmlの幅/境界の半径が正しく動作しない

は、ここでは、コードです：

<html> 
    <head> 
     <style> 
     body 
     { 
     background: #373; 
     margin:0; 
     } 
     #container 
     { 
     background:transparent; 
     padding:24; 
     } 
     #page 
     { 
     display: block; 
     background:#eee; 
     width: 850; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
     margin: 0 auto; 
     padding:5px; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="page"> 
       Testing 1 2 3 
      </div> 
     </div> 
    </body> 
</html>

コピーしてthisに貼り付けます。

出典

2011-12-04 Gᴇᴏᴍᴇᴛᴇʀ

問題はゼロ以外のwidthとpadding属性のように見えます。ゼロ以外の幅が指定された単位を有する必要がある：

長さの値のフォーマットは、オプションの符号文字である - すぐに続く（「+」または「+」が既定された状態で、「」）数字（小数点の有無にかかわらず）の直後にユニット識別子（2文字の略語）が続きます。「0」番号の後、ユニット識別子はオプションです。

私は必ずしもあなたの所望の最終結果が何であるかを知らないとはいえ、以下では、動作しているようです：

body 
{ 
background: #373; 
margin:0; 
} 
#container 
{ 
background-color:transparent; /* amended to 'background-color' as per @Viruzzo's comment */ 
padding:24px; /* needed to add 'px' to this line */ 
} 
#page 
{ 
display: block; 
background-color:#eee; /* amended to 'background-color' as per @Viruzzo's comment */ 
width: 850px; /* and to this one */ 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
margin: 0 auto; 
padding:5px; 
}

JS Fiddle demo。

比較のために'before' version, with your own html/css。

参考文献：

CSS units of length, at the W3.org。

出典

2011-12-04 20:00:06

また、 'background'はすべての値の短文プロパティです。色は' background-color'を使うべきです。 – Viruzzo

@Viruzzo、おかげで、不適切な省略表現のプロパティは私の最初の閲覧を免れました。編集中=） –

ありがとう！それは完璧に働いた！ –

doctype htmlの幅/境界の半径が正しく動作しない

答えて

関連する問題