层叠样式表服务器兼容问题解决技巧.docxVIP

层叠样式表服务器兼容问题解决技巧 由于浏览器开发人员对国际web规则的广泛理解，同一网站在不同的网页上显示不同的效果，即所谓的浏览器兼容性问题。若界面设计者能够周全地考虑兼容问题,不仅能体现其技术水平,也是对其网站用户负责的一种态度。 1 ie国外功能 浏览器是万维网(Web)服务的客户端浏览程序,可向万维网服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。 几种常用浏览器: (1)IE(Internet Explorer)浏览器。介绍是由Microsoft公司开发,因其捆绑在Windows系统中,并且是免费推出,所以占据着绝大部分的市场份额。目前,IE浏览器使用较多的版本是IE6.0、IE7.0、IE8.0以及IE9.0。以IE为内核的常见浏览器:世界之窗(The World);傲游浏览器(Maxthon);腾讯TT(Tencent Traveler);360安全浏览器;搜狗浏览器(Sougou Explorer)等。 (2)Mozilla Firefox(火狐)浏览器。Firefox是由Mozilla公司开发的一个开源浏览器,它能够跨多个操作系统,此外还具有体积小、速度快等优点。这款免费的开源浏览器也占据着很大的市场份额。 2 基于扎克浏览器的兼容性问题分析和解决 (1) 多标签性能差异 在网页中随便写几个标签,如果对其不加任何样式控制,在各种浏览器下显示的效果就会有较大差别。这是因为各浏览器padding和margin默认值不同。这是最常见的浏览器兼容性问题,解决方法就是在CSS(Cascading Style Sheet,CSS)文件开头用通配符*设置各个标签的内外补丁为0,即*{margin:0;padding:0;}。 (2) 多在性能类上加入创新属性 块属性标签被设置float后,如果又有横向的margin,在IE6.0中显示的margin值将是设置值的2倍。这是IE6.0的一个常见bug,是float布局中最常见的兼容性问题。解决方法是在div标签样式控制中加入display:inline;将其转化为行内属性。 例如:div id=“test1” 相应的CSS代码为:#test1{ float:left;margin:10 px 0 0 10 px;}。在不同的浏览器下显示如图1和图2所示;当样式表中加入display:inline;后,IE6显示效果如图2所示。 (3) 如何处理社会网点高和高度 在IE6.0、IE7.0及遨游浏览器中,定义较小高度的标签,这个标签的高度不受控制,超出设置的高度。出现这个问题的原因是IE8.0之前的浏览器都会给标签一个最小默认的行高的高度。即使标签是空的,高度还是会达到默认的行高。解决方法是给超出高度的标签设置overflow:hidden;或者设置line-height小于设置的高度。 (4) 识别破解的间隙 将几个img标签放在一起时,由于img标签属于行内属性的标签,只要不超过容器宽度,img标签都会在一行中显示。但在某些浏览器下图片之间会存在空隙,即使加了通配符*{margin:0;padding:0;}也不起作用。要去掉这个间距应使用float属性为img布局,虽然使用负margin也能够解决,但由于负margin本身就很容易引起浏览器兼容性问题,所以不建议使用。 (5) 容器高度无创高度 当一个标签的内容高度小于一个值(如500 px)时,这个标签的高度为500 px。而当内容高度500 px时,容器高度等于内容的高度,而不出现滚动条。这时需要用到min-height:500 px;,但它在IE6.0浏览器中不能被识别。解决方法是{min-height:500 px;height:auto!important;height:100 px;overflow:visible;} (6) 转化sql函数,检查层序,把层关系转换为植物一般参数化的植物,结果把解决描述风速还从形成,却导致了对方 如果要让一个具有一定宽度的div(div id=“container”…/div)在IE浏览器中水平居中显示,只需用body{text-align:center;} #container{width:800 px;},但这在Firefox浏览器下却不能实现。解决方法是将CSS代码改为body{text-align:center;} #container{width:800 px;margin:0 auto;text-align:left;}。 (7) roin ul和ol标签在Firefox浏览器中默认是有padding值的,而在IE浏览器中只有margin默认有值。这样只要先定义ul(或ol){margin:0;padding:0;}即可。