在IE6中块元素化的a标签涉及的问题和bug

轻松由我 · 发表于 2009-3-17 14:42:06

请注意，此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>

メ阿ǒ瑞メ · 发表于 2009-11-20 09:05:02

@,@..是什么意思呀？

		自动登录	找回密码
密码			注册

在IE6中块元素化的a标签涉及的问题和bug

浏览过的版块