网页设计之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