CSS3 확인 관련 문제

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%; 
} 

나는 코드의 유효성을 검사하기 위해 다음 웹 사이트를 사용했습니다.

일단 내가 그것을 검증하면 많은 오류가 발생합니다. 사실 22 개의 오류와 10 개의 경고가 있습니다! 나는 혼자서 html5와 css3을 배우는 초보자입니다. 나는 지금까지이 기회를 갖게되어 정말 기쁩니다.하지만 오류를 바로 잡기 위해 당신 같은 전문가의 도움이 필요합니다. 방금이 포럼에서 도움을 받아이 CSS3 코드와 관련된 html5 코드를 수정했습니다.하지만 오류가 한 개있었습니다. 그러나이 코드는 너무 많습니다. 무엇이 잘못 되었나요? 제발 도와주세요. 대단히 감사합니다.

Answer 1

당신은 잘못된 속성 모질라와 웹킷과의 호환성을 위해을 사용하고 있습니다.

당신은이 :

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

그리고

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

은 사실 그냥 border-radius를 사용할 수는 있어야한다. 그러나 그것이 오류의 출처입니다.

Answer 2

문제는 해당 이름 앞에 -없이 고유 속성을 사용하고 있기 때문에 문제가되는 것입니다.

예를 moz-border-radius 들어 있어야한다

-moz-border-radius 
--^-- 

같은 그래서 webkit-border-radius 당신이 얻을 수 추가 옵션을 클릭 할 수 있습니다, 또한

-webkit-border-radius 
--^-- 

---

해야한다뿐만 아니라 -webkit 특성에 간다 precised validation.

Answer 3

유효성 검사기가 잘못된 접두사 moz- 및 webkit-의 사용에 대해 불평합니다. 앞에 대시를 추가해야합니다. 그러나 모두 함께 제거하는 것이 좋습니다. 그래서 다음 규칙은 필요하지 않습니다 :

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

당신은 오래된 브라우저의 부부를 지원하지 않으려면 안전하게

border-radius: 5px; 

를 사용할 수 있습니다. 최신 브라우저는 모두 접두어가없는 border-radius을 지원합니다. 지원 here을 참조하십시오.