声明不同,导致ul下li的list-style显示属性不一样

今天在做一个导航栏时发现一个奇怪的问题,两个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)

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注