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