Question

我一直在讨论一些CSS问题，并发现它是doctype。

生产现场进行

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

我们的舞台网站载有

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

使用生产标签时，我的List元素的许多文本颜色，大小等都会消失。

我使用960网格css文件，然后是reset和text.css文件。

之后我有一个带有我自己样式的main.css文件，但是特定div中我的列表的字体样式没有被识别

下面是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>

Answer 1

doctype：

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

在浏览器中触发标准模式，而另一个触发Quirks模式。

在Quirks模式下，浏览器模拟旧浏览器的错误（很老，我们在这里谈论IE 5.5），以应对不熟悉标准的人设计的网站。在这种模式下，浏览器很多彼此更不一致，并且（在某些情况下）根本不支持CSS的一些新功能。这使得Quirks模式非常不受欢迎。

在标准模式下，浏览器对CSS中的错误的容忍度要低得多。 http://jigsaw.w3.org/css-validator/会帮助您找到它们。

DocType导致无法识别CSS

1 个答案: