news pic

网页设计之CSS兼容性问题

网页设计之CSS兼容性问题

我们现在在网站建设的时候CSS的应用已经是越来越深受设计者们的青睐;但CSS对阅读器的兼容性有时也让人很头疼,或许当你理解当中的技术跟原理,就会觉得也不是难事,从网上搜集了IE7,6与Fireofx的兼容性处置技术并整理了一下。关于web2.0的过度,请尽量用xhtml格式写代码,并且DOCTYPE 影响 CSS 处置,做为W3C的规范,一定要加 DOCTYPE声明。

CSS技术

1.div的垂直居中Issue(问题)

vertical-align:middle; 将行距增长到和全部DIV一样高 line-height:200px; 接着拔出文字,就垂直居中了。缺陷是要控制内容不必换行

2. margin加倍的Issue(问题)

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。处理方案是在这个div外面加上display:inline;

例如:

<#div id=”imfloat”>

对应的css为

#imfloat{

float:left;

margin:5px;/*IE下了解为10px*/

display:inline;/*IE下再了解为5px*/}

 

3.浮动ie发生的双倍间隔

#box{ float:left; width:100px; margin:0 0 0 100px; //这种状况之下IE会发生200px的间隔 display:inline; //使浮动疏忽}

 

这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开端,高度,宽度,行高,边距都能够控制(块元素);Inline元素的特点是,和其他元素在同一行上,不成控制(内嵌元素);

#box{ display:block; //能够为内嵌元素模仿为块元素 display:inline; //完成同一行陈列的效果 diplay:table;

 

4 IE与宽度和高度的Issue(问题)

IE不认得min-这个定义,但实践上它把正常的width和height当做有min的状况来使。这样Issue(问题)就大了,假如只用宽度和高度,正常的阅读器里这两个值就不会变,假如只用min-width和min-hei