在济南网站制作中,网站的兼容性问题一直都很重要,由于目前浏览器的多样化,很多浏览器的内核核心都有所不同,所以导致目前市场上运用个浏览器的用户也各有所同。
就拿微软的IE来说,每个版本的IE对代码的识别都不同,从最早的IE6到如今的IE8都有不同的用户在用。前几年在中国的市场上,很多盗版的装机XP系统光盘都是自带的IE6浏览器,大部分的用户也不会或者不懂怎么对浏览器升级,导致目前在中国的市场上,很多人的电脑上的IE浏览器还是IE6的核心。当然也有部分的用户使用IE7、IE8、IE9、火狐、360浏览器(才用的核心是电脑上IE的核心)等等各式各样的浏览器。
我们作为济南网站建设公司,在制作网站的时候一定要考虑任何一个有可能浏览本网站的用户,我们不能肯定所有的用户都是使用的同样的浏览器,所以我们在网站制作的时候就要对网站的兼容性做出兼容,保证任何一个访问该网站的人,都可以清晰、正确的看到网站内容,不会出现布局错乱甚至是出现JS错误等现象。
一、使高版本的浏览器核心转换成低版本的核心。
在网页的<head></head>标签中加入代码:<meta http-equiv="x-ua-compatible" content="ie=7" />,这样IE8浏览器表现出来的样式就和IE7是一样的了。
注意:此方法只适合高版本往低版本转换。也就是说你在使用ie浏览器的时候,如果加入了<meta http-equiv="x-ua-compatible" content="ie=8" />这样的代码是没有效果的。我们在实际应用中,基本也不会使用此代码,因为这样会违背W3C的标准。
二、CSS浏览器兼容性技巧。
①、如果在CSS中使用了float语句,最好在css中加入display:inline;,这样的目的是避免在IE6和IE7中浮动产生margin的双倍间距。
②、如果是父级的css,并且有border边框显示,记得在CSS中加入overflow:hidden;,这样的目的是让父级元素避免无法包含子元素,导致子元素超出父级元素的border。
③、如果在IE6中,父级元素无法被子元素扩充,在CSS中加入zoom:1;,这样的目的是触发IE6的Haslayout属性,使得父级元素可以被子元素扩充。
④、如果在IE中使用了ul li dl dt dd这样的列表元素,列表中又存在span标签,会导致span标签换行,这时候我们需要在css中给span元素和<a>标签分别设置一个宽度,然后在进行左浮动和右浮动。
⑤、如果在IE中使用line-height没有效果的时候,我们要在CSS中加入当前DIV的heigt属性,这样在IE中line-height就能有作用了。
⑥、如果要使用空白的话,我们最好不要使用margin进行空间的间隔,最好的办法是使用:.blank {clear: both;height: 8px;line-height: 8px;visibility: hidden;}这样一段代码,这段代码可以很方便的达到网页空间的目的,非常好用。
⑦、如果需要清楚浮动济南网站建设建议你使用这段代码:.clear {clear: both;height: 0;margin: 0;overflow: hidden;padding: 0;}这段代码,这也是很好用的。
三、浏览器的hack语法。
我们在写CSS的时候, 有时会遇到CSS的hack的语法,最常见的写法是:
①、如果只需要对IE6使用css的hack的话,可以在CSS属性前面加一个_下划线符号,如:height:10px;_height:20px;,这样写的话,浏览器解析出来就是除了IE6外的所有浏览器都是10px,IE6为20px;
②、只对IE6、IE7浏览器写CSS的hack使用“*”,如:height:10px;*height:20px;,这样写的话就是除了IE6/7浏览器,别的浏览器解析出来都是10px;
③、兼容全部浏览器的hack写法:
height:10px; //所有的浏览器
*height:20px; //IE浏览器
*height:30px !important; //IE7浏览器
height:40ox \9; //IE8浏览器
这样写是最全的方式,可以适合任何浏览器。
我们在书写CSS的时候,最好能不用CSS的hack就不用,因为用这个是最后的办法,这个方法大大增加了CSS的大小,还有不会符合W3C的标准。
济南网站制作中,网页浏览器兼容的方法常见的就是上面这些,但是就像我们说的,以上的这些方法,除了我们写的第二大条,第一条和第三条能不用最好不要使用,因为如果网站不兼容了,我们首先要查找是不是CSS出现了一些问题,而不是一旦看到页面不兼容了,就要去用CSS的hack方法去对不同浏览器写CSS,这样是非常不正确的。我们要在保证浏览器的兼容的基础上,也要遵循W3C的标准,从而是的网站制作出来更加符合各大浏览器的标准,加载速度更快!本文由济南网站建设公司-济南腾飞网络发布,转载请注明:http://m.0531soso.com