CSS兼容问题.doc

细说 CSS 兼容问题 2009/03/05 15:26 原创声明: 本文章内容为完全原创, 转贴引用请注明出处,谢谢! CSS 样式是一种很老的网络技术了,最初 版本发布于 1996 年,十多年了,但它又是一种崭新的技术,因为它不断地有新的内容和新的应用。到现在几乎没有网站不使用 CSS 样式来进行设计的了。说到样式的兼容, 当然指的是同一个样式对不同浏览器显示的兼容。这是每一个网站设计者必须要认真考虑的事情。但事实上, 由于各种浏览器的执行标准的偏差及对不同的显示模式的不同理解, 同样的样式就很可能出现不同的显示结果, 因此即美观大方又完美兼容的 CS S 样式并不容易制作。因此各大网站的风格往往以最基本的简洁模式展现, 谓之曰, CSS 的精髓之所在是也~~ 。但不论如何地简洁,仍旧有必要顾及到兼容性,目前一般只考虑 IE、FF 及 Opera 这三大浏览器的兼容性即可。再细说又要考虑到不同版本浏览器的兼容, 比如 IE6 与 IE7 ,至于 FF 及 opera 一般认定为最新版就好了。 CSS 兼容问题有太多方面了, 要深入了解它, 首先我们必须知道上述的三大浏览器在样式显示上有哪些常见的不兼容或者说不一致的地方。当然这个有很多方面, 恐怕 samaria 也不能完全说个清楚,就随便说几点吧。[1] 标记问题: IE 是不支持非标准的 HTML 标签(tag) 的,比如,你完全可以在 FF 或 oper a 中自定义一个 TAG , <my_hook></my_hook> , 然后用 CSS 来控制其内容样式,如: my_hook {position: absolute; display:block; top:20px; font-size:18px; .....} , 但是 IE 中这是不被承认的。[2] 伪类问题: 与标签相似, IE 不承认非默认的标签伪类。比如最常用的<a href=""></a> 标签, 一般我们会这样写: a, a:hover, a:visited {...} , 大家都知道前面 CSS 样式的意思, 但它究竟算怎么回事呢,其实就是一种 CSS 的伪类样式。这方面不展开讲,否则就变成 CSS 讲解了。好了, 受到这个启发, 那你会想, 随便找个标签是不是也可以这样定义它的伪样式呢? OK , 试一下就知道了。比如对<h6></h6> 标签进行伪类设置, 实验表明,在 FF 及 opera 中均可实现其效果,但 IE 中无效, 注意: <h6> 本身是被 IE 认可的, 所以正规的样式设置是被认可的。(本博客主页面的 abouts 模块其实只是‘关于我’模块中的一部分,用 html 添加了<h6> 标记,同时在 CSS 中对 h6 进行了定位设置,仅此而已。) [3] 边框的扩展方向问题: IE 中,对一个 div 或表格等块级元素定义边框,通常其边框是在你定义好的 div 宽度及高度内,在其内部扩展而产生的边框。举例说就是,如果你的 bod y 的宽度定义为: body {width:1024px; height:auto;} , 同时如果边框设置是: body {border:100px solid #000; }, 那么你的 body 内容部分的实际宽度( 除去边框) 就只剩 824px 了。但 fi