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

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

由于浏览器开发人员对国际web规则的广泛理解，同一网站在不同的网页上显示不同的效果，即所谓的浏览器兼容性问题。若界面设计者能够周全地考虑兼容问题,不仅能体现其技术水平,也是对其网站用户负责的一种态度。1ie国外功能浏览器是万维网(Web)服务的客户端浏览程序,可向万维网服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。几种常用浏览器:(1)IE(InternetExplorer)浏览器。介绍是由Microsoft公司开发,因其捆绑在Windows系统中,并且是免费推出,所以占据着绝大部分的市场份额。目前,IE浏览器使用较多的版本是IE6.0、IE7.0、IE8.0以及IE9.0。以IE为内核的常见浏览器:世界之窗(TheWorld);傲游浏览器(Maxthon);腾讯TT(TencentTraveler);360安全浏览器;搜狗浏览器(SougouExplorer)等。(2)MozillaFirefox(火狐)浏览器。Firefox是由Mozilla公司开发的一个开源浏览器,它能够跨多个操作系统,此外还具有体积小、速度快等优点。这款免费的开源浏览器也占据着很大的市场份额。2基于扎克浏览器的兼容性问题分析和解决(1)多标签性能差异在网页中随便写几个标签,如果对其不加任何样式控制,在各种浏览器下显示的效果就会有较大差别。这是因为各浏览器padding和margin默认值不同。这是最常见的浏览器兼容性问题,解决方法就是在CSS(CascadingStyleSheet,CSS)文件开头用通配符*设置各个标签的内外补丁为0,即*{margin:0;padding:0;}。(2)多在性能类上加入创新属性块属性标签被设置float后,如果又有横向的margin,在IE6.0中显示的margin值将是设置值的2倍。这是IE6.0的一个常见bug,是float布局中最常见的兼容性问题。解决方法是在div标签样式控制中加入display:inline;将其转化为行内属性。例如:<divid=“test1”>相应的CSS代码为:#test1{float:left;margin:10px0010px;}。在不同的浏览器下显示如图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)容器高度无创高度当一个标签的内容高度小于一个值(如500px)时,这个标签的高度为500px。而当内容高度>500px时,容器高度等于内容的高度,而不出现滚动条。这时需要用到min-height:500px;,但它在IE6.0浏览器中不能被识别。解决方法是{min-height:500px;height:auto!important;height:100px;overflow:visible;}(6)转化sql函数,检查层序,把层关系转换为植物一般参数化的植物,结果把解决描述风速还从形成,却导致了对方如果要让一个具有一定宽度的div(<divid=“container”>…</div>)在IE浏览器中水平居中显示,只需用body{text-align:center;}#container{width:800px;},但这在Firefox浏览器下却不能实现。解决方法是将CSS代码改为body{text-align:center;}#container{width:800px;margin:0auto;text-align:left;}。(7)roinul和ol标签在Firefox浏览器中默认是有padding值的,而在IE浏览器中只有margin默认有值。这样只要先定义ul(或ol){margin:0;padding:0;}即可。(8)域名编码根据不同的浏览器对CSS的支持及解析结果不同样,CSS中的优先级不同,可以对不同的浏览器写不同的CSS,这就是CSSHack的工作原理。首先需要了解以下规则:background:red;//所有浏览器通用_background:red;//“_”IE6.0浏览器专用*background:red;//“*”、IE6.0、IE7.0共用,IE8.0、firefox均不能识别background:red!important;//“!important”Firefox、IE7.0、IE8.0浏览器共用其次,还需了解CSS代码的优先级,!important的优先级最高,行内样式次之,ID选择器再次之,类选择器更次之,标签选择器最低。对于优先级相同的按后出现优先原则。目前比较全的CSSHack浏览器兼容性如表2所示。3ie体验er和弗里特胡(1)域名及其他．针对IE浏览器的不同版本,界面设计者均需查看网页的显示效果,若在自己的机器上安装各种版本的浏览器,较为复杂。IETester是免费软件,是IE浏览器兼容性测试工具,它同时包括了IE5.5、IE6.0、IE7.0、IE8.0、IE9.0的所有内核,可在IETester中查看不同IE版本的页面显示效果,以保证测试的页面可在各版本IE浏览器中正确显示。(2)系统的编辑软件介绍Firebug是Firefox浏览器的一个插件,集网站语言查看与编辑、控制台、网络状况监视器于一体,是开发调试JavaScript、CSS、HTML等网站语言的助手工具。这里介绍的Firebug的CSS调试器,查看器能够列出页面调用的每一个CSS样式表:定义位置、详细CSS代码及其从属继承关系。用户可在该查看器中直接添加、修改、删除CSS样式表属性,当前页面即可直接显示编辑后的页面效果。Firebug的CSS查看