Question

这是我的CSS3代码。

body
{
    background-color: #fdf4d5;
    font-family: "Times New Roman", Times, serif;
    font-size: 100%;
    line-height: 1.5;
    text-align: left;
}
a
{
    text-decoration: none;
}
a:link, a:visited
{
    color: #C80000;
}
a:active
{
    background-color: #C80000;
    color: #FFF;
}
.body
{
    clear: both;
    margin: auto;
    width: 70%;
}
.mainHeader img
{
    height: auto;
    margin: 0 0;
    width: 100%;
}
.mainHeader nav
{
    background-color: #faa01e;
    border-radius: 5px;
    height: 60px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
}
.mainHeader nav ul
{
    list-style: none;
    margin: 0 auto;
}
.mainHeader nav ul li
{
    color: #FFF;
    display: inline;
    float: left;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
    color: #FFF;
    display: inline-block;
    height: 30px;
    padding: 15px 80px;
}
.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a.visited
{
    background: #C80000;
    color: #FFF;
    text-shadow: none;
}
.mainHeader nav ul li a
{
    border-radius: 5px;
    height: 60px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
}
.mainContent
{
    border-radius: 5px;
    line-height: 25px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
}
.content
{
    border-radius: 5px;
    float: left;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 70%;
}
.content img
{
    border-radius: 5px;
    height: auto;
    margin: 0 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.content p:first-letter
{
    text-transform: uppercase;
}
.content p
{
    color: #000;
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    font-size: 14pt;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    line-height: 145%;
    margin: 40px auto;
    text-align: left;
    text-transform: lowercase;
}
.bottomContent
{
    border-radius: 5px;
    moz-border-radius: 5px;
    padding: 3% 0;
    webkit-border-radius: 5px;
}
.boxOne
{
    border-radius: 5px;
    float: left;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 30%;
}
.boxTwo
{
    border-radius: 5px;
    float: left;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 30%;
}
.boxOne img
{
    border-radius: 5px;
    height: auto;
    margin: 0 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.boxTwo img
{
    border-radius: 5px;
    height: auto;
    margin: 0 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.mainFooter
{
    background-color: #FAA01E;
    border-radius: 5px;
    float: left;
    margin: 2% 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.mainFooter p
{
    color: #FFF;
    float: right;
    margin: 2% auto;
    width: 92%;
}

我使用以下网站验证代码。 http://jigsaw.w3.org/css-validator/validator

一旦我验证了它，我收到了很多错误。事实上22个错误和10个警告！我是一个自己学习html5和css3的新手。我真的很开心我已经走到这一步了。但是我需要像你这样的专家帮助纠正错误。我刚刚在这个论坛的帮助下纠正了与这个css3代码有关的html5代码。但它只有1个错误。但这太多了。什么地方出了错？请帮帮我。非常感谢你。

Answer 1

问题是您使用的专有属性在名称前没有-，因此您需要这样做。

例如moz-border-radius应为

  -moz-border-radius
--^--

同样适用于-webkit属性，因此webkit-border-radius应为

  -webkit-border-radius
--^--

此外，您可以点击更多选项以获得精确验证。

enter image description here

Answer 2

您使用错误的属性来实现Mozilla和Webkit的兼容性。

你有：

moz-border-radius:
webkit-border-radius:

它应该是

-moz-border-radius:
-webkit-border-radius:

实际上你可以使用border-radius。但这就是错误的来源。

Answer 3

Validator投诉使用了错误的前缀moz-和webkit-。你应该在它们前面加上破折号。但最好将它们全部一起移除。所以不需要下一个规则：

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

您可以安全地使用

border-radius: 5px;

除非您想支持几个旧浏览器。所有现代浏览器都支持border-radius，不带前缀。请参阅支持here。

验证CSS3的问题

3 个答案: