DocType이 CSS를 인식하지 못하게 함

저는 CSS 문제에 대해 머리를 숙였으며 doctype이라고 생각했습니다.DocType이 CSS를 인식하지 못하게 함

생산 사이트 내 텍스트 색상의 많은 생산 태그를 사용하는 경우 우리의 무대 사이트

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

를 운반로

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

이 요소가 사라 내 목록에 대한 등 크기를 수행합니다.

나는 960 grid css 파일 다음에 reset 및 text.css 파일을 사용합니다.

는 그 후 나는 내 자신의 스타일을 가진 main.css가 파일이 아직 구체적으로 특정 DIV 안에 내 목록의 글꼴 stylings가 다음은

는 HTML 다음 페이지의 CSS입니다 인식되지 않습니다

.sideBox { 
    width: 225px; 
    float: right; 
    text-align: left; 

} 

.sidebox ul, #slideMenu ul { 

    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-indent: 0; 
    margin-top:8px; 
} 

#slideMenu ul li { 

    margin-right:10px; 
    padding-right: 10px; 
    float: left; 
    width:150px; 
    border-right: 1px solid #cccccc; 
} 

.sidebox li { 

    height:124px; 
    margin: 0; 
    padding: 0 10px; 
    border-bottom: 1px solid #cccccc; 


} 

.sidebox li:first-child{ 
    height:123px; 
    border-top: 1px solid #cccccc; 
    border-bottom: 1px solid #cccccc; 
} 
.sidebox h3, .sidebox p 
{ 
    margin: 0; 
    color: #707070; 
    padding:0; 
    font-size: 22px; 
    margin-top:1px; 
    font-weight:500; 

} 
.sidebox p { 
    font-size:18px; 
    color:#a6a6a6; 

} 
.infoBoxDiv { 
    height: 100%; 

    vertical-align: middle; 
} 
.infoBoxDiv h2, infoBoxDiv.p { 
    height: 100%; 
    vertical-align: middle; 
} 
.sidebox li.infohighlighted { 
    border-top: 2px solid #00A4E4; 
    border-bottom: 2px solid #00A4E4; 
    position:relative; 
    top:-1px; 
    height:121px; 
} 
.sidebox li:first-child.infohighlighted { 
    border-top: 2px solid #00A4E4; 
    border-bottom: 2px solid #00A4E4; 
    position:relative; 
    top:0px; 
    height:121px; 
} 
.sidebox li.infohighlighted p { 
    color: #707070; 
    font-family: Georgia; 
} 
.sidebox li.infohighlighted h3 { 
    color: #00A4E4; 
    font-family: Georgia; 
    margin: 0px; 
    top: -1px; 
    padding: 0px; 
} 



<html> 
    <head> 

     <link rel="stylesheet" type="text/css" href="css/960.css" /> 
     <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
     <link rel="stylesheet" type="text/css" href="css/text.css" /> 
     <link rel="stylesheet" type="text/css" href="css/main.css" /> 
     <title>Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script src="js/jquery.js" type="text/javascript"></script> 
     <script src="js/jquery_ui.js" type="text/javascript"></script> 
     <script src="js/rotator.js" type="text/javascript"></script> 

    </head> 
    <body style="background-color:#e4e5ef;"><br><br> 
     <div class="container_16" style="background-color:#fff;"><br><br> 
      <div id="splashContainer"> 
       <div id="jqb_object"> 

        <div class="jqb_slides"> 

         Slides Here 

        </div> 
       </div> 

       <div class="sideBox"> 
        <ul id="slideList"> 
         <li id="infoBox_0" class="infoDefault infoHighlighted"><br><h3>$95 Rx Glasses</h3><p>Vintage inspired frames with prescription lenses</p></li> 
         <li id="infoBox_1" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new exclusively designed styles</p></li> 
         <li id="infoBox_2" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li> 
         <li id="infoBox_3" class="infoDefault"><br><h3>New Collection</h3><p>See 4 new Designs</p></li> 
        </ul> 
       </div> 
      </div> 
      <div id="mediaBanner" class="subContainer"> 
       <div id="featuredIn"> 
        <span style="vertical-align:middle; line-height:38px;">Featured In:</span> 
        <img src="images/nyTimes.png" style="vertical-align:middle;margin:none;padding:none;"> 
        <img src="images/vogue.png" style="vertical-align:middle;margin:none;padding:none;"> 
        <img src="images/dailyCandy.png" style="vertical-align:middle;margin:none;padding:none;"> 
        <img src="images/gq.png" style="vertical-align:middle;margin:none;padding:none;"> 
        <span style="vertical-align:middle; line-height:38px;color:#ccc; padding-left:30px;font-style:bold;">|</span> 
       </div> 
       <div id="socialBox"><span style="vertical-align:middle; line-height:38px;">Join Us | Follow Us</span></div> 
      </div> 
      <div class="subContainer miniBoxContainer"> 
       <div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div> 
       <div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div> 
       <div class="miniBox"><img src="images/miniBox282x128.jpg" /><h4>New Collection</h4><a href="#">Check out the new collection</a></div> 
      </div> 
     </div> 

    </body> 
</html>

출처

2011-01-24 CogitoErgoSum

프로덕션 사이트에서 작동하게하는 doctype을 사용하지 않는 이유는 무엇입니까? 첫 번째 코드는 사용중인 코드와 유사하므로 CSS 파일을 호출하는 방식에 문제가 있다고 생각합니다. – Andrew

firefox를 사용 중이라면 오류 콘솔을 표시하십시오 (shift-ctrl-j). doctype (또는 일반적으로 구문 오류)으로 인해 CSS 오류가 발생하면 해당 오류가 기록됩니다. –

productiond DocType을 제어 할 수 없습니다. 프로덕션 사이트에는 왜 HTML 왜곡 된 확장 doctype 태그가 있습니다. 이유는 확실하지 않습니다. – CogitoErgoSum

문서 타입 : 다른 하나는 쿼크 모드를 유발하면서

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

는, 브라우저에서 표준 모드를 트리거합니다.

Quirks 모드에서 브라우저는 표준에 익숙하지 않은 사람들이 디자인 한 사이트를 처리하기 위해 오래된 브라우저 (IE 5.5를 말하는 아주 오래된 버전)의 버그를 에뮬레이션합니다. 이 모드에서 브라우저는 이 많고이 서로 불일치하며 (경우에 따라) CSS의 새로운 기능을 전혀 지원하지 않습니다. 이로 인해 Quirks 모드는 매우 바람직하지 않습니다.

표준 모드에서 브라우저는 CSS의 오류를 훨씬 덜 용납합니다. http://jigsaw.w3.org/css-validator/ 당신이 그들을 찾을 수 있도록 도와 줄 것입니다.

출처

2011-01-24 19:27:13 Quentin

그래 CSS는 유효하지만 여전히 문제입니다. : – CogitoErgoSum

문제점을 발견했습니다. 그러나 CSS Specificity가 표준 모드를 통과하기에 충분하지 않음을 확인했습니다. – CogitoErgoSum

DocType이 CSS를 인식하지 못하게 함

답변

관련 문제