请注意，此DIVCSS案例教程在IE6中进行调试！
在CSS网页布局开发中，常常会遇到各种莫名其妙的问题，出现问题可能是因为我们所掌握的知识不够，也可能是浏览的bug造成。在52CSS.com的群中，曾经出现过这样一个问题，块元素化的a标签的外边距，会随着hover等鼠标悬停动作而消失，而普通的块元素则不会出现这样的问题。这个问题困扰着三号群的一个管理员，想了很久也没有头绪。
我对他的代码进行了分析，发现这是一个奇怪的问题，还涉及到了一个bug。但他的代码语义化不明确，如果以合适的标签，组建具有语义和良好结构的文档，这个问题完全可以避免，考虑到这个问题的奇怪与普遍性，单独写出这篇文章发布于52CSS.com上，对大家或许有一定的参考意义。
我们首先看HTML编码：
Example Source Code
<p>
<a href="http://www.52css.com/">52CSS.com首页</a>
<a href="http://www.52css.com/default.asp?cateID=3">Div+CSS教程</a>
<a href="http://www.52css.com/default.asp?cateID=9">CSS布局实例</a>
<a href="http://www.52css.com/default.asp?cateID=5">CSS2.0教程</a>
<a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a>
<a href="http://www.52css.com/css_template/">CSS模板下载</a>
</p>
以一个段落P标签包含着六个链接a元素，这本身就存在着不规范性，严格来说，具有语义建立良好结构的HTML文档，这样的内容应该以ul+li进行组织。如果以ul+li组织就不会出现下面所出现的问题了，我们接着往下看。
我们再看看CSS编码：
Example Source Code
* {
margin:0px;
padding:0px;
font-size:13px;
}
p {
float:left;
width:250px;
padding:15px 10px;
background:#ddd;
}
p a {
display:block;
width:250px;
height:25px;
margin:0 0 5px 0;
line-height:25px;
font-weight:bold;
color:#fff;
text-indent:8px;
text-decoration:none;
background:#333;
}
p a:hover {
background:#000;
}
关于CSS需要说明的是a元素的CSS定义。转换为块元素，定义宽与高，设置下外边距为5px。按正常的理解，各a元素间会有垂直5px的间隔。但在hover等鼠标悬停动作下，这样的间隔会消失。如下图所示。
Source Code to Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在IE6中块元素化的a标签涉及的问题和bug - 52CSS.com</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
font-size:13px;
}
p {
float:left;
width:250px;
padding:15px 10px;
background:#ddd;
}
p a {
display:block;
width:250px;
height:25px;
margin:0 0 5px 0;
line-height:25px;
font-weight:bold;
color:#fff;
text-indent:8px;
text-decoration:none;
background:#333;
}
p a:hover {
background:#000;
}
</style>
</head>
<body>
<p>
<a href="http://www.52css.com/">52CSS.com首页</a>
<a href="http://www.52css.com/default.asp?cateID=3">Div+CSS教程</a>
<a href="http://www.52css.com/default.asp?cateID=9">CSS布局实例</a>
<a href="http://www.52css.com/default.asp?cateID=5">CSS2.0教程</a>
<a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a>
<a href="http://www.52css.com/css_template/">CSS模板下载</a>
</p>
</body>
</html>
我分析可能是IE6对元素的属性判断不够所造成的现象，我试着给a元素增加浮动属性的设置，解决了间隔会消失的外边距问题，但出现了Duplicate Characters Bug（文字复制bug）。关于文字复制bug您可以参考下面的链接。
Duplicate Characters Bug 在IE中的HTML注释引起文字奇怪的复制
遇到这样的问题，而且一般的hack还起不了作用。非常奇怪。如图所示：
Source Code to Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在IE6中块元素化的a标签涉及的问题和bug - 52CSS.com</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
font-size:13px;
}
p {
float:left;
width:250px;
padding:15px 10px;
background:#ddd;
}
p a {
display:block;
float:left;
width:250px;
height:25px;
margin:0 0 5px 0;
line-height:25px;
font-weight:bold;
color:#fff;
text-indent:8px;
text-decoration:none;
background:#333;
}
p a:hover {
background:#000;
}
</style>
</head>
<body>
<p>
<a href="http://www.52css.com/">52CSS.com首页</a>
<a href="http://www.52css.com/default.asp?cateID=3">Div+CSS教程</a>
<a href="http://www.52css.com/default.asp?cateID=9">CSS布局实例</a>
<a href="http://www.52css.com/default.asp?cateID=5">CSS2.0教程</a>
<a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a>
<a href="http://www.52css.com/css_template/">CSS模板下载</a>
</p>
</body>
</html>
我试着给p元素增加宽度到253px，问题得到了最终的解决。但没有语义。
Source Code to Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在IE6中块元素化的a标签涉及的问题和bug - 52CSS.com</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
font-size:13px;
}
p {
float:left;
width:253px;
padding:15px 10px;
background:#ddd;
}
p a {
display:block;
float:left;
width:250px;
height:25px;
margin:0 0 5px 0;
line-height:25px;
font-weight:bold;
color:#fff;
text-indent:8px;
text-decoration:none;
background:#333;
}
p a:hover {
background:#000;
}
</style>
</head>
<body>
<p>
<a href="http://www.52css.com/">52CSS.com首页</a>
<a href="http://www.52css.com/default.asp?cateID=3">Div+CSS教程</a>
<a href="http://www.52css.com/default.asp?cateID=9">CSS布局实例</a>
<a href="http://www.52css.com/default.asp?cateID=5">CSS2.0教程</a>
<a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a>
<a href="http://www.52css.com/css_template/">CSS模板下载</a>
</p>
</body>
</html>
在上面的内容中，我也提到此文档的代码语义化不明确，如果以合适的标签，组建具有语义和良好结构的文档，这个问题完全可以避免，那如何建立这样较为理想的文档呢。
看下面的HTML代码：
Example Source Code
<ul>
<li><a href="http://www.52css.com/">52CSS.com首页</a></li>
<li><a href="http://www.52css.com/default.asp?cateID=3">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/default.asp?cateID=9">CSS布局实例</a></li>
<li><a href="http://www.52css.com/default.asp?cateID=5">CSS2.0教程</a></li>
<li><a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a></li>
<li><a href="http://www.52css.com/css_template/">CSS模板下载</a></li>
</ul>
这样的代码更加具有语义，而且更符合此类内容的结构。我们再看CSS代码：
Example Source Code [www.52css.com]
* {
margin:0px;
padding:0px;
font-size:13px;
}
ul {
float:left;
width:250px;
padding:15px 10px;
background:#ddd;
}
ul li {
float:left;
margin:0 0 5px 0;
list-style-type:none;
}
ul li a {
display:block;
width:250px;
height:25px;
line-height:25px;
font-weight:bold;
color:#fff;
text-indent:8px;
text-decoration:none;
background:#333;
}
ul li a:hover {
background:#000;
}
最终的运行效果与前面出现问题的代码一致，这样编码，不但避免了出现问题和bug，也使文档更加专业
Source Code to Run
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在IE6中块元素化的a标签涉及的问题和bug - 52CSS.com</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
font-size:13px;
}
ul {
float:left;
width:250px;
padding:15px 10px;
background:#ddd;
}
ul li {
float:left;
margin:0 0 5px 0;
list-style-type:none;
}
ul li a {
display:block;
width:250px;
height:25px;
line-height:25px;
font-weight:bold;
color:#fff;
text-indent:8px;
text-decoration:none;
background:#333;
}
ul li a:hover {
background:#000;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">52CSS.com首页</a></li>
<li><a href="http://www.52css.com/default.asp?cateID=3">Div+CSS教程</a></li>
<li><a href="http://www.52css.com/default.asp?cateID=9">CSS布局实例</a></li>
<li><a href="http://www.52css.com/default.asp?cateID=5">CSS2.0教程</a></li>
<li><a href="http://www.52css.com/css_websites_showcase/">CSS酷站欣赏</a></li>
<li><a href="http://www.52css.com/css_template/">CSS模板下载</a></li>
</ul>
</body>
</html>