CSS浏览器兼容问题的示例分析

这篇文章主要介绍了CSS浏览器兼容问题的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

CSS对阅读器的兼容性偶然让人很头疼,大约当你领略当中的才力跟情理,就会感应也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整顿了一下.对于web2.0的过火,请尽可能用xhtml格局写代码,而且DOCTYPE 影响 DIV CSS处理,作为W3C的标准,一定要加 DOCTYPE声明.

CSS才能

1.div的垂直居中标题 vertical-align:middle; 将行距增加到和整个DIV异样高 line-height:200px; 接下来插入翰墨，就垂直居中了。瑕疵是要牵制形式不要换行

2. margin加倍的标题问题 设置装备摆设为float的div在ie下配置的margin会愈加。这是一个ie6都具有的缝隙。意图方案是在这个div内中加上display:inline; 例如：

<#div id="imfloat">

响应的css为

#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

3.浮动ie发生发火的双倍隔断

1. #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与宽度与高度的问题 IE 不认得min-这个定义，但实际上它把畸形的width与height当作有min的情况来使。如许标题就大了，若是只用宽度和高度，畸形的浏览器里这两个值就不会变，假如只用min-width与min-height的话，IE下面根底等于不有设置宽度与高度。 譬如要设置装备摆设后盾图片，这个宽度是对照紧要的。要规画这个标题问题，可以这样： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.页面的最小宽度 min -width是个十分方便的CSS敕令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版不停准确。但IE不认得这个，而它实际上把width当成最小宽度来使。为了让这一呼吁在IE上也能用，可以把一个

7.IE捉迷藏的问题 当div运用冗杂的时刻每个栏中又有一些链接，DIV等这个时刻容易发生捉迷藏的问题。 有些内容透露表现不进去，当鼠标决议这个周边是发现内容确确凿页面。 筹划方式：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面构造尽量容易。

8.float的div闭合;断根浮动;自顺应高度;

① 例如：

<#div id="floatA" > <#div id="floatB" > <#div id=" NOTfloatC" >

这里的NOTfloatC并不盼望继续平移，而是企望往下排。(其中floatA、floatB的属性也曾设置装备摆设为 float:left;) 这段代码在IE中毫无标题，标题出在FF。启事是NOTfloatC并不是float标签，必需将float标签闭合。

在<#div class="floatB"> <#div class="NOTfloatC">之间加之 < #div class="clear">这个div一定要留意身分，而且必需与两个具有float属性的div同级，之间不能具备嵌套干系，否则会发生无比。 而且将clear这种样式界说为为如下即可：

1. .clear{ clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能被动适应，要在wrapper内中加上overflow:hidden; 当收罗float的 box的时候，高度踊跃适应在IE下有用，这时候刻应当触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，如许就抵达了兼容。 例如某一个wrapper以下定义：

1. .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,咱们用得最多的css描画可能等于float:left.有的时刻咱们需要在n栏的float div反面做一个匹敌的后援,譬如: