为了解决浏览器兼容性问题常用的几个 CSS 技巧 (trick)

由于 IE 和其他一些浏览器的盒模型(box model)解释不同, 以及一些对 CSS 标准解释的偏差,现在要想编写兼容的 CSS 代码真是越来越困难了。 下面随便说几点常见的修正 bug 的方法。

例子1:( IE 中 hover 行为的 bug ? )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Roger Chen">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
#div1 
{background: lightblue; width: 150px; border: 1px solid red;}
#div1 a 
{display: block; border: 20px solid green; margin-right: 20px;}
#div1 a:hover 
{background: orange;}
</style>
</head>
<body>

<div id="div1"><id="link1" href="#">Link</a></div>

</body>
</html>

如果你把这个代码放在 IE 和 Mozilla 中运行,会发现细微的区别。当我们利用 CSS 将一个 inline 的标签 <a> 显示为 block 的时候, IE 和 Mozilla 产生的效果里, block 的大小似乎是一致的(黑色的边框是为了方便判断大小而设置的)。然而仔细观察能够发现: Mozilla 中显示的 <a> 标签扩展到了整个 <div> 的宽度, 鼠标只要在右端晃一下就能显示出高亮时的橙色背景。 而 IE 里的却必须晃到其内含的文字上面才会有反应。在基于 Web 标准的设计中,常常用 <ul> 和 <a> 等简单的标签配合 CSS 来创建网页导航菜单, 这个问题如果不解决,会影响到实际显示的效果。

让我们来尝试一下给 <a> 加一个 width: 100% 的样式:

#div1 a {display: block; border: 20px solid green; margin-right: 20px; width: 100%;}

可以看到,这次 hover 的问题解决了,但是在 Mozilla 里的显示变得很奇怪, <a> 的右边跑到 <div> 外面去了。当然,这个也是有办法修正的, 只需要再加一行 CSS 代码:

html>body #div1 a {width: auto;}

html>body 这个语法是 IE 所不能识别的一种选择符, 所以在 IE 中会忽略这一行, 而 Mozilla 中则由于这个代码而得到修正。(用 auto 替换掉上面定义过的 100% 宽度。因为 CSS 中同一个级别的样式后面的会覆盖前面的。)

现在可以看到,在 IE 和 Mozilla 下的外观和鼠标高亮的行为方式有了大致的统一。当然,由于盒模型的解释不同,最后的结果还存在着两者宽度不一致的问题。

本来想多小结几个的,刚写了这么一点感觉要找全资料还真不容易。看来剩下的只好留给以后慢慢总结吧。

进一步阅读:
http://www.positioniseverything.net/
http://www.positioniseverything.net/ie-primer.html
http://www.positioniseverything.net/articles/float-bugs-1.html
http://www.positioniseverything.net/articles/box-model.html

posted on 2005-02-01 23:51 NeilChen 阅读(...) 评论(...)  编辑 收藏

公告

导航