CSS兼容问题.doc

细说CSS兼容问题2009/03/05 15:26原创声明：本文章内容为完全原创，转贴引用请注明出处，谢谢！CSS样式是一种很老的网络技术了，最初1.0版本发布于1996年，十多年了，但它又是一种崭新的技术，因为它不断地有新的内容和新的应用。到现在几乎没有网站不使用CSS样式来进行设计的了。说到样式的兼容，当然指的是同一个样式对不同浏览器显示的兼容。这是每一个网站设计者必须要认真考虑的事情。但事实上，由于各种浏览器的执行标准的偏差及对不同的显示模式的不同理解，同样的样式就很可能出现不同的显示结果，因此即美观大方又完美兼容的CSS样式并不容易制作。因此各大网站的风格往往以最基本的简洁模式展现，谓之曰，CSS的精髓之所在是也。但不论如何地简洁，仍旧有必要顾及到兼容性，目前一般只考虑IE、FF及Opera这三大浏览器的兼容性即可。再细说又要考虑到不同版本浏览器的兼容，比如IE6与IE7，至于FF及opera一般认定为最新版就好了。CSS兼容问题有太多方面了，要深入了解它，首先我们必须知道上述的三大浏览器在样式显示上有哪些常见的不兼容或者说不一致的地方。当然这个有很多方面，恐怕samaria也不能完全说个清楚，就随便说几点吧。1标记问题：IE是不支持非标准的HTML标签(tag)的，比如，你完全可以在FF或opera中自定义一个TAG，然后用CSS来控制其内容样式，如：my_hook position: absolute; display:block; top:20px; font-size:18px; .， 但是IE中这是不被承认的。2伪类问题：与标签相似，IE不承认非默认的标签伪类。比如最常用的标签，一般我们会这样写：a, a:hover, a:visited .，大家都知道前面CSS样式的意思，但它究竟算怎么回事呢，其实就是一种CSS的伪类样式。这方面不展开讲，否则就变成CSS讲解了。好了，受到这个启发，那你会想，随便找个标签是不是也可以这样定义它的伪样式呢？OK，试一下就知道了。比如对标签进行伪类设置，实验表明，在FF及opera中均可实现其效果，但IE中无效，注意：本身是被IE认可的，所以正规的样式设置是被认可的。（本博客主页面的abouts模块其实只是关于我模块中的一部分，用html添加了标记，同时在CSS中对h6进行了定位设置，仅此而已。 ）3边框的扩展方向问题：IE中，对一个div或表格等块级元素定义边框，通常其边框是在你定义好的div宽度及高度内，在其内部扩展而产生的边框。举例说就是，如果你的body的宽度定义为：body width:1024px; height:auto; ，同时如果边框设置是：body border:100px solid #000; ，那么你的body内容部分的实际宽度（除去边框）就只剩824px了。但firefox中却不是这样的，如果同样的设置的话，那么FF中你的body内容的实际宽度不会变，其边框会向外扩展，即上下左右都扩展100px。opera中会如何显示，大家不妨自己试试看。4浏览器默认设置的不同而带来的问题。在此仅举一例，在FF中，若有一张图片， 要对其进行边框的设置。也许你会这样写：img border:5px; ，你满以为这样的话，这张图片就会向外扩展一个宽度为5px的边框出来。但你错了，你将看到图片没有任何改变！但这句样式如果用在IE中那也许会与你想象中的结果差不多。但在FF中就为什么没反应呢？问题就在于FF中，其对边框的默认设置为：border-bottom-color:-moz-use-text-color;border-bottom-style:none;border-bottom-width:0px;border-left-color-ltr-source:physical;border-left-color-rtl-source:physical;border-left-style-ltr-source:physical;border-left-style-rtl-source:physical;border-left-style-value:none;border-left-width:0px;border-left-width-ltr-source:physical;border-left-width-rtl-source:physical;border-right-color-ltr-source:physical;border-right-color-rtl-source:physical;border-right-color-value:-moz-use-text-color;border-right-style-ltr-source:physical;border-right-style-rtl-source:physical;border-right-width-ltr-source:physical;border-right-width-rtl-source:physical;border-right-width-value:0px;border-top-color:-moz-use-text-color;border-top-style:none;border-top-width:0px;看到没？你只设置了其宽度，但它的边框样式(border-style)呢？仍然为none，这样当然就不会显示边框的存在了。所以在FF中，定义边框时一定要齐全，标准的方法如下：border:宽度 样式 颜色; ，比如：#my_link div.item border: 3px inset #c5438a; ，这样是合写的方式，如果要分别定义上、下、左、右边框，也要把样式和颜色分别写上。5不同浏览器各自的一些其它限制。比如在FF及opera中都是支持页面的最大与最小宽度的（当然这个都是默认的设置，不过也可以在html或样式中定义），但IE是不识别也不承认的。比如在FF中，你可以如下设置：body min-width: 1024px !important; max-width: 1280px !important; ，这样，你的页面伸缩范围就定义在10241280之间了，但IE就不理这个了，该是多少还是多少。还有就是滚动条了。IE及opera中，用下面代码可令滚动条变成黑色：(早几版本的opera也是不支持的)body scrollbar-face-color: #000000; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#000000; scrollbar-base-color:#000000; scrollbar-track-color:#000000;但FF中仍使用默认风格。此外，对图片半透明设置的问题一直是IE区别于其它浏览器的一大特色。现在IE7有所改善，但仍不完美，这个较为复杂，有兴趣的朋友可以搜搜，大把大把的。除了对图片本身的半透明支持外，对一个块级元素的半透明效果设置，在IE与opera, firefox中也有不同，在IE中要这样写：div filter:alpha(opacity=50) ; ，在FF或opera中就这样写：div opacity:0.5;， 因此如果要兼容IE与FF等，也可以在同一句CSS里把两种表达方法都用上，就变成这样子了：div filter:alpha(opacity=50); opacity:0.5; ，浏览器执行时各取所需，岂不妙哉！6容错能力的不同造成显示的不同。这个问题很清楚，本不必扩展来讲。总之写CSS代码时一定养成标准严格的好习惯就是了。比如，使用注释符号时，不要嵌套注释语句或嵌套式屏蔽。像下面这样子就不好了：/* div div a /* 这一句定义链接样式*/div a:hover */写CSS代码最好用全用小写，就连html也发展为Xhtml，提出了全部代码小写的要求。还要注意数值后最好跟上单位。不写单位的话，浏览器一般会默认地认为是 px ，但也保不定受到上下文的影响，浏览器会理解为其它单位，再说这是一个习惯问题。还有，针对百度空间来说，有些代码是不能用的，比如 expression，用它可以与页面中的javaScript产生交互，这是很实用的一种功能，有些时候也用来进行兼容，但百度会屏蔽掉这种代码。最后，写代码要条理清楚，从上到下，从外到里。这里的上/下，外/里是针对html的DOM树的上下来讲的，也就是的上下级、盒子模型之里外层的意思（不明白的朋友也就不要深究罢了，或者简单认为与模块的上下排列相似亦可）。按这种方式来写，最能直观看出不同模块的继承关系及位置关系。这个相当重要！尤其是出现兼容问题时，只有这样写出来的代码才能方便