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


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

 

本文作者:



相关阅读:
window.location.hash 属性使用说明
asp 防止SQL注入代码
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
SpeedPHP框架核心调试工具
CSS文字控制之letter-spacing和word-spacing
SQL查询语句精华使用简要
一个jsp+AJAX评论系统
使用ASP.NET模板生成HTML静态页面的五种方案
HTML表格标记教程(6):暗边框色属性BORDERCOLORDARK
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Ajax乱码问题整理
SQL Server 2005数据库开发概述
W3C Widget 配置与打包
CSS网页布局入门教程13:下拉及多级弹出式菜单
快速导航

Copyright © 2016 phpStudy |