今天在做一个导航栏时发现一个奇怪的问题,两个html文件的body内容一样,引入的是同一个CSS文件,但是一个的ul下li显示有圆点,另一个却不显示圆点。经过仔细对比才发现两个html文件的<!DOCTYOE>声明不同。一个是:
<!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">
不知道为什么会这样,谁能解答下?
附html文件内容和CSS文件内容:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>首页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body > <div id="index_area2"> <ul class="main_menu"> <li class="item_text"><a href="#">导航1</a></li> <li class="item_text"><a href="#">导航2</a></li> <li class="service_text"> </li> </ul> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; }
body {
text-align: center; /* for IE */
background-color: #EEE;
}
div#index_area2{
clear: both;
margin: 0 auto;
width: 975px;
}
div#index_area2 ul.main_menu{
height:auto;
background-color:#47B9EA;
}
div#index_area2 ul.main_menu li.item_text{
float:left;
background-color:#47B9EA;
}
div#index_area2 ul.main_menu li.item_text a{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#FFFFFF;
text-decoration:none;
line-height: 3em;
width: 120px;
border-right: solid 1px #FFF;
vertical-align: middle;
}
div#index_area2 ul.main_menu li.item_text a:hover{
background-color:#003C63;
}
div#index_area2 ul.main_menu li.service_text {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#FFFFFF;
text-decoration:none;
line-height: 3em;
padding-left: 30px;
vertical-align: middle;
height: 38px;
}
(原博客发布时间:2012-04-08 15:20:30)