Question

我最近尝试构建HTML5网页（使用<!DOCTYPE html>标记）我制作了一个带有边界半径的居中页面，与DOC一起。它是流动的，但没有它是好的。我在想，我做错了什么？如何包含doctype并使其有效？

以下是代码：

<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。

Answer 1

问题似乎是非零width和padding属性;任何非零宽度都需要指定一个单位：

长度值的格式是一个可选的符号字符（'+'或' - '，其中'+'是默认值）后面紧跟一个数字（带或不带小数点）后紧跟一个单位标识符（两个字母的缩写）。在“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。

doctype html宽度/边框半径不起作用

1 个答案: