1. 文字大小不兼容

同样14px的宋体字,ie下实际占高16px,下留白3px,firefox下实际占高17px,上留白1px,下留白3px。

文字大小不兼容解决方案: 给所有文字设定通用line-height值

2.div高度不兼容

firefox下div容器定义height后,div不会因为内容超出height而撑大,而i6e下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

div高度不兼容解决方案:如果设置高度,需要同时把内容物高度限定,也就是溢出隐藏处理:overflow:hidden;或者当需要随着内容自适应高度,但又想div有一个最小的高度时候,像这样做min-height: 1400px;max-height:none;_height: 1400px;

3.div宽度不兼容

如果div容器设定float浮动但没设定宽度,那么也会出现ie6和firefox的不兼容。firefox下内容会撑开容器渗入它前面的div,ie6下该div内容折行而不是我们想象的与同级div在同一行。

div宽度不兼容解决方案:浮动div容器一般需定义width。

4.div浮动不兼容

当前面div有左浮动和右浮动,下面div就会受他们影响也有浮动。ie也许不用加清除,但firefox下不清除浮动是不行的。

div浮动不兼容解决方案:给下面的div设定清除 clear:both;

  1. double-margin不兼容

ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决方案:给浮动容器定义display:inline。

  1. mirror margin不兼容

当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px.padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。

解决方案:外层元素设定border 或设定float。

7.吞吃现象

还是ie6,上下两个div,上面div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。

解决方案:使用zoom:1.这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug

多出来的一只猪,这是前人总结这个bug使用的比喻。ie6下这个bug,大家会在页面看到猪字出现两遍,重复内容量因注释的多少而变。

解决方案:用”<!-[if !IE]> picRotate start <![endif]->”方法写注释。

9.

  • 里加 float
  • 这是一个典型的,棘手的兼容问题,希望引起大家重视。,给li不同的属性会有不同的解释效果,ff下的解释稍可理解,ie6下的解释会让你摸不着头脑。在《ul使用心得》一文里有相关成果,却没给出问题解决过程。

    10.使用了”float:left;display:inline”的ul的奇怪表现

    可以看出这句css是针对ie6下的double margin bug 而加上的display:inline,这也是我的css体系里的重要一环,在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。

    11.img下的留白

    大家看这段代码有啥问题:

    <imgsrc=””mce_src=””/>
    把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写
    <imgsrc=””mce_src=””/>
    后面两个标签要紧挨着.ie7下这个bug 依然存在。

    解决方案:给img设定 display:block。

    12.失去line-height

    <divstyle=”line-height:20px”>文字,很遗憾,在ie6下单行文字 line-height 效果消失了,原因是这个inline-block元素和inline元素写在一起了。

    解决方案:让img 和文字都 float起来。引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。

    13.链接的hover状态

    a:hover img{width:300px} 我们想让鼠标hover时,链接里包含图片宽度变化,可惜在ie6下无效,ie7、ff下有效。

    14.非链接的hover状态

    div:hover{} 这样的样式ie6是不认的,在ie7、ff下才有效果。

    15.block化的a链接

    其内套absolute层,absolute层内放置img,ie下,鼠标点击img不会有链接效果,firefox、opera下正常。

    上面的诸多问题如果你掌握了其中奥妙,90%的不兼容问题不需要另起css hack的。

    16.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案:给overflow:hidden加position:relative或者position:absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

    17.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度.float元素如果作为布局用或复杂的容器,都要给个宽度的。

    18.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

    19.ie6下的bug,内有<basetarget=”_blank”/>的情况下,position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

    20.终于来了个firefox缺点 width:100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此只能给中间的所有浮动层加width:100%才行,累啊.opera这点倒学乖了跟了ie。

    1. Padding vs. Margin

    对于浏览器来说,Margin是兼容性最差的一个属性。因此只要条件允许,尽可能的使用Padding属性。

    为什么会有兼容性问题?

    由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。

    使用Trident内核的浏览器:IE、Maxthon、TT; 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox; 使用Presto内核的浏览器:Opera7及以上版本; 使用Webkit内核的浏览器:Safari、Chrome。
    而我现在所说的兼容性问题,主要是说IE与几个主流浏览器如firefox,google等。而对IE浏览器来说,IE7又是个跨度,因为之前的版本更新甚慢,bug甚多。从IE8开始,IE浏览器渐渐遵循标准,到IE9后由于大家都一致认为标准很重要,可以说在兼容性上比较好了,但是在中国来说,由于xp的占有率问题,使用IE7以下的用户仍然很多,所以我们不得不考虑低版本浏览器的兼容。

    对浏览器兼容问题,一般分,HTML,Javascript兼容,CSS兼容。 其中html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。特别是HTML5增加了许多新标签,低版本浏览器有点影响时代进步啊

    问题一:不同浏览器的标签默认的外补丁和内补丁不同

    1. 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
    2. 碰到频率:100%
    3. 解决方案:css里 {margin:0;padding:0;}
    4. 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。

    问题二:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大

    1. 问题症状:常见症状是ie6中后面的一块被顶到下一行
    2. 碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
    3. 解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
    4. 备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。

    问题三:设置较小高度标签(一般小于10px),在ie6,ie7,遨游中高度超出自己设置高度

    1. 问题症状:ie6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
    2. 碰到频率:60%
    3. 解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    4. 备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。

    问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)

    1. 问题症状:ie6里的间距比超过设置的间距
    2. 碰到几率:20%
    3. 解决方案:在display:block;后面加入display:inline;display:table;
    4. 备注:行内属性标签,为了设置宽高,我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后,在ie6下,他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

    问题五:图片默认有间距

    1. 问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加上问题一中提到的通配符也不起作用。
    2. 碰到几率:20%
    3. 解决方案:使用float属性为img布局
    4. 备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道

    问题六:标签最低高度设置min-height不兼容

    1. 问题症状:因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
    2. 碰到几率:5%
    3. 解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    4. 备注:在B/S系统前端开时,有很多情况下我们有这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

    问题七:透明度的兼容css设置

    方法是:每写一小段代码(布局中的一行或者一块)我们都要在不同的浏览器中看是否兼容,当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的,只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话,就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

    技巧一:css hack

    使用hacker 我可以把浏览器分为3类:ie6 ;ie7和遨游;其他(ie8 chrome ff safari opera等)

    1. ie6认识的hacker 是下划线_ 和星号 *
    2. ie7 遨游认识的hacker是星号 * (包括上面问题6中的 !important也算是hack的一种。不过实用性较小。)

    比如这样一个css设置 height:300px;height:200px;_height:100px;
    ie6浏览器在读到 height:300px的时候会认为高时300px;继续往下读,他也认识
    heihgt, 所以当ie6读到height:200px的时候会覆盖掉前一条的相冲突设置,认为高度是200px。继续往下读,ie6还认识_height,所以他又会覆盖掉200px高的设置,把高度设置为100px;
    ie7和遨游也是一样的从高度300px的设置往下读。当它们读到
    height200px的时候就停下了,因为它们不认识_height。所以它们会把高度解析为200px;
    剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。

    因为优先级相同且相冲突的属性设置后一个会覆盖掉前一个,所以书写的次序是很重要的。

    /* CSS属性级Hack */ 
    color:red; /* 所有浏览器可识别*/
    
    _color:red; /* 仅IE6 识别 */
    
    *color:red; /* IE6、IE7 识别 */
    
    +color:red; /* IE6、IE7 识别 */
    
    *+color:red; /* IE6、IE7 识别 */
    
    [color:red; /* IE6、IE7 识别 */ 
    
    color:red\9; /* IE6、IE7、IE8、IE9 识别 */
    
    color:red\0; /* IE8、IE9 识别*/
    
    color:red\9\0; /* 仅IE9识别 */
    
    color:red \0; /* 仅IE9识别 */
    
    color:red!important; /* IE6 不识别!important 有危险*/
    
    /* CSS选择符级Hack */ 
    *html #demo { color:red;} /* 仅IE6 识别 */
    
    *+html #demo { color:red;} /* 仅IE7 识别 */
    
    body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 
    */ 
    head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
    
    :root #demo { color:red\9; } : /* 仅IE9识别 */
    

    越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。这不多说,归结为到一定水平了,浮动会用的较少。另外,您也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。

    技巧二:padding,marign,height,width

    注意是技巧,不是方法: 写好标准头 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> http://www.w3.org/1999/xhtml”> 尽量用padding,慎用margin,height尽量补上100%,父级height有定值子级height不用100%,子级全为浮动时底部补个空clear:both的div宽尽量用margin,慎用padding,width算准实际要的减去padding。

    技巧三:显示类(display:block,inline)

    display:block,inline两个元素
    
    display:block; //可以为内嵌元素模拟为块元素
    
    display:inline; //实现同一行排列的的效果
    
    display:table; //for FF,模拟table的效果
    

    display:block块元素,元素的特点是: 总是在新行上开始;高度,行高以及顶和底边距都可控制;宽度缺省是它的容器的100%,除非设定一个宽度

    display:inline就是将元素显示为行内元素,元素的特点是:和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变。span,a,label,input,img,strong和em是 inline 元素的例子。

    技巧四:怎样使一个div层居中于浏览器中?

    <style type="text/css">
    
    <!-- div {
    
    position:absolute;
    
    top:50%;
    
    left:50%;
    
    margin:-100px 0 0 -100px;
    
    width:200px;
    
    height:200px;
    
    border:1px solid red; } -->
    
    </style>
    

    div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;

    技巧五:float的div闭合;清除浮动;自适应高度

    ①例如:<div id=”floatA”><div id=”floatB”><div id=”NOTfloatC”>

    • 这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
    • 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在<divclass=”floatB”><div class=”NOTfloatC”>之间加上<div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可:.clear{clear:both;}

    ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
    例如某一个wrapper如下定义:

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

    ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

    <div id=”page”>
    
    <div id=”left”></div>
    <div id=”center”></div>
    <div id=”right”></div>
    
    </div>

    比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left centerright的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决:

    <div id=”page”>
    
    <div id=”bg” style=”float:left;width:100%”>
    
    <div id=”left”></div>
    <div id=”center”></div>
    <div id=”right”></div>
    
    </div>
    
    </div>

    再嵌入一个float left而宽度是100%的DIV解决之。

    ④万能float 闭合(非常重要!)

    关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”即可,屡试不爽。

    /* Clear Fix */ 
    .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } 
    .clearfix { display:inline-block; } 
    /* Hide from IE Mac */ 
    .clearfix {display:block;} 
    /* End hide from IE Mac */ 
    /* end of clearfix */

    或者这样设置:.hackbox{display:table; //将对象作为块元素级的表格显示}

    技巧六:div嵌套时 y轴上 padding和 marign的问题

    1. FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
    2. IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
    3. FF里 y 轴上 父padding=0 且 border=0 时,子div 到 父div 的距离为0,子marign 作用到 父div 外面

    一个好奇的人