div+css 解决ie6,7,8,FF兼容

div+css 解决IE 6,7,8 FF兼容问题

  1. IE8下兼容问题,加如下代码就实现从IE7到IE8的兼容
  2. float 浮动造成的IE6 下面的双倍边距问题,也是最常见的,用!important解决。如
    margin-left:10px!important;/*IE7,8 FF下是10px*/
    margin-left:5px/*IE6下属性写的是5px,但是现实的是10px
  3. 清除块display,可以解决浮动造成的块,但DIV背景填色或填图片的时候,会出现背景断开或差一小块,在div的css写display:block就可以解决问题
  4. 通过important 会有IE FF兼容写法的不同。需要写成
    height:100px;+height:1200px
  5. 当FF上出现浮动,并且div会偏离预想位置的时候,在div下清除浮动即可
  6. 盒模型的问题。
  • 要在body下用设置一个所有元素集合的div
  • 使用绝对定位才能居中
  1. 对于不同浏览器的写法不一样
  • background:red /* IE7下面显示蓝色*/
  • +background:blue!important;/IE7下面显示的蓝色/
  • +background:green;/IE6下面显示的是绿色/

IE 6,7,8 FF 浏览器的css兼容问题


  1. 代码解析将IE8解析成 IE7模式,所以代码就不用考虑IE8的兼容性
    background:red /*大部分浏览器有效*/, *background:black;/*对IE7有效*/, _backgroud:yellow;/*只对IE6有效*/,
  • 对于大部分浏览器都对第一种写法支持

  • IE7 前两种写法都支持

  • IE6 三段都支持,而"_"这个写法只有IE6才认

  • 三种写法都需要在头文件中进行文档申明

解决IE6,IE7,firefox 兼容最简单的CSSHack

使用hack在很多实践中,使用如下
`#someNode

position:fixed;

position:fixed;

_position:fixed;
}
第一排是Firefox以及其他浏览器看
第二排给IE7等
第三排给IE6以及更老的版本看
hack具体用法参照 http://www.duitang.com/static/csshack.html

IE6 DIV 错位情况

  1. 使用左浮动是,IE6 会出现向下移动,出现空白。因为IE6的内核默认把DIV之间的距离增加3~5px,所以在margin-left:-5px
    解决方案
  • 在页面加入下面代码;在IE8下自动解析成IE7

    • 对整个网站,在IIS中加入如下描述,
  • css 布局居中问题
    body{text-align:center} .#center{margin-right:auto;margin-left:auto}
    在mozilla中可能需要左右margin auto的情况

  • 盒模型的解析不同

  • 浮动产生的双倍距离的问题

  • IE的宽度高度问题
    在IE中不认识min-这个定义,IE把正常的高度就当成最小高宽,如下解决
    .#box{ width: 80px; height: 35px;}html>body .#box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

  • 页面的最小宽度
    min-width可以写如下css代码设计进行使用
    .container{minwidth:600px;width:expression(document.body.clientWidth<600?'600px':'auto');}

你可能感兴趣的:(div+css 解决ie6,7,8,FF兼容)