1
我一直在抨擊一些CSS問題，並認定它是文檔類型。DocType導致CSS不被識別
生產現場進行
<!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">
當使用生產標籤我的很多文本顏色，大小等，爲我的列表元素消失。
我使用960網格CSS文件，其後是它的重置和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>
爲什麼不直接使用能夠在生產網站上工作的文檔類型？第一個看起來像你應該使用的那個，所以我敢打賭，這是你調用CSS文件的方式的一個問題。 – Andrew 2011-01-24 19:19:05
如果您使用的是Firefox，請彈出錯誤控制檯（shift-ctrl-j）。如果有任何由doctype導致的CSS錯誤（或者一般的任何語法錯誤），他們會在那裏記錄。 – 2011-01-24 19:20:10