zoukankan      html  css  js  c++  java
  • IE 兼容性问题

    1.IE6-IE7 可能会有2个class属性,真TMD蛋疼,一个是初始的,后来的是js赋值的

    2.不同浏览器的标签默认的margin和padding不同

    解决方法: * { margin:0; padding:0;}

    IE6双倍margin(块属性+float+横向margin)

    说明:如div+css布局,<div style="float: left;margin-left: 10px;"></div>,在IE6下显示会有margin-left:20px的距离

    解决方法:_display:inline

    IE6下的浮动元素和非浮动元素间出现3像素

    说明:当一个元素浮动时,同级别的文字没有浮动,在ie6下它们之间就会产生3个像素的bug。如:<div><img style="float: left;" src=""/>测试测试</div>,这时图片和文字就会出现3像素。

    解决方法:css hack  如:<div><img style="float: left;" src=""/><span style="margin-right: 5px; _margin-right: 2px;">测试测试</span></div>

    IE6标签有最小默认行高说明:当设置较小高度的标签时(一般小于10px),标签高度超出自己设置的高度

    解决方法:设置overflow:hidden;或者设置行高line-height 小于你设置的高度

    3.IE6不支持min-height/max-height/min-width/max-width

    解决方法:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

    4.图片默认有间距

    说明:几个img标签放在一起布局的时候,有些浏览器会有默认的间距

    解决方法:使用float属性为img布局

    5.透明度的兼容

    解决办法: filter:alpha(opacity=80);/*ie支持该属性*/

                   opacity:0.8;/*支持css3的浏览器*/
     
    6.IE6/IE7下对display:inline-block的支持性不好。
    1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
    2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
          对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)
         IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
     
    IE6下块元素如何实现display:inline-block的效果?

    有两种方法:
    1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容): 

    div {display:inline-block;...} 
    div {display:inline;}

    2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:

    div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
    div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/
  • 相关阅读:
    MVC 学习(二)之Linq to Sql 简单Demo
    MVC 学习(一)Linq to Entities 简单Demo
    MVC学习(三)Code-First Demo
    pickle 模块
    json 模块
    sys 模块
    os 模块
    random(随机)模块
    time 模块
    python之函数基础
  • 原文地址:https://www.cnblogs.com/lizhanglong/p/3984642.html
Copyright © 2011-2022 走看看