本文向大家描述一下IE6,IE7,IE8 CSS兼容速查表，现代Web设计与开发越来越看重浏览器兼容问题，IE每个新版本的推出，都在CSS的标准化方面前进一大步。
    IE每个新版本的推出，就不可避免地在IE的各个主要版本之间产生兼容问题，尽管IE8推出已有时日，使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS（2.1和3）在IE6，IE7，IE8三个版本之间的兼容情况。

    IE6,IE7,IE8 CSS兼容速查表

    现代Web设计与开发越来越看重浏览器兼容问题，IE每个新版本的推出，都在CSS的标准化方面前进一大步，同时，也就不可避免地在IE的各个主要版本之间产生兼容问题，尽管IE8推出已有时日，使用IE6的用户仍然相当可观。本文以速查手册的形式介绍CSS（2.1和3）在IE6，IE7，IE8三个版本之间的兼容情况。

    1.居中问题

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

    2.高度问题

    两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在Firefox中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
    所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是height:100%;
    但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：
    .float_bottom{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

    3.clear:both

    不想受到float浮动的，就在div中写入clear:both;

    4.IE浮动margin产生的双倍距离

    	
  • #box{ ?
    • 
	
  • float:left; ?
    • 
	
  • width:100px; ?
    • 
	
  • margin:000100px;//这种情况之下IE会产生200px的距离 ?
    • 
	
  • display:inline;//使浮动忽略 ?
    • 
	
  • } ?
    • 
	
  • ?
    •

    5.padding问题

    Firefox设置padding后，div会增加height和width，但IE不会（*标准的XHTML1.0定义dtd好像一致了）
    高度控制恰当，或尝试使用height:100%;
    宽度减少使用padding
    但根据实际经验，一般Firefox和IE的padding不会有太大区别，div的实际宽=width+padding，所以div写全width和padding，width用实际想要的宽减去padding定义

    6.div嵌套时y轴上padding和marign的问题

    Firefox里y轴上子div到父div的距离为父padding+子marign
    IE里y轴上子div到父div的距离为父padding和子marign里大的一个
    Firefox里y轴上父padding=0且border=0时，子div到父div的距离为0，子marign作用到父div外面

    7.padding，marign，height，width的傻瓜式解决技巧

    注意是技巧，不是方法：
    写好标准头?

    	
  • ?
    • 
	
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
    • 
	
  • <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">?
    • 
	
  • ?
    •

    高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div
    宽尽量用margin，慎用padding，width算准实际要的减去padding。

    列表类

    1.ul标签在Firefox中默认是有padding值的，而在IE中只有margin有值
    先定义ul{margin:0;padding:0;}

    2.ul和ol列表缩进问题
    消除ul、ol等列表的缩进时，样式应写成:{list-style:none;margin:0px;padding:0px;}

    显示类

    1.display:block,inline两个元素

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

    ◆display:block块元素，元素的特点是：

    总是在新行上开始；
    高度，行高以及顶和底边距都可控制；
    宽度缺省是它的容器的100%，除非设定一个宽度
    <div>，<p>，<h1>，<form>，<ul>和<li>是块元素的例子

    ◆isplay:inline就是将元素显示为行内元素，元素的特点是：

    和其他元素都在一行上；
    高，行高及顶和底边距不可改变；
    宽度就是它的文字或图片的宽度，不可改变。
    <span>，<a>，<label>，<input>，<img>，<strong>和<em>是inline元素的例子

    2.鼠标手指状显示

    全部用标准的写法cursor:pointer;

    背景、图片类

    1.background显示问题

    全部注意补齐width，height属性

    2.背景透明问题

    IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
    IE:filter:alpha(opacity=10);
    Firefox:opacity:0.6;
    Firefox:-moz-opacity:0.10;


    最好两个都写，并将opacity属性放在下面

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: 谈IE浏览器的CSS兼容问题（IE6 IE7 IE8三大浏览器的CSS兼容速查表） http://www.chhua.com/web-note626

相关笔记

更多