IE、Firefox、Chrome中兼容问题

position:relative\absolute

在IE下：position:absolute；position:relative；之间的关系是遵循父级子级关系；即，最末级div寻找上一级容器的坐标以此为基准定位自身坐标值（top,left,right,bottom）

如下：a的直接子级是b、d，c是b的直接子级，c是a的子子级，b和d属于同级。因此在IE中c的定位基于b，b和d的定位基于a。a直接影响b间接影 响c。c的准确定位显示会是a的定位+b的定位=c的定位。b和d属于同级，它们的定位是基于a的，因此在坐标值都是0的情况下，b和d是重叠的。

<div style="position:relative" id="a">

<div style="position:absolute" id="b">

<div style="position:absolute" id="c">

</div>

</div>

<div style="position:absolute" id="d">

</div>

</div>

 

在Firefox中这点的表现和IE是相同的。

 

在Chrome中就有所不同。

不同之处是：1、当定位坐标值是使用负值，如left:-30px;这个时候IE下就会被父容器的容积限制中，父容器会掩盖住子容器。因为子容器的定位超出了父容器的容积。在Chrome中不会出现掩盖的情况。

2、在Chrome中以上div之间的关系就有些微妙了。虽然表面上看还是a的直接子级是b、d，c是b的直接子级，c是a的子子级，b和d属于同级。但 是他，它们定位的时候所有设置为position:absolute都会寻找上一级是否设置的是position:relativ它们以距离自己最近的 position:relativ为标准容器进行坐标值定位。即b、c、d、都基于a定位，c的定位不受b这个父级的限制。

基于以上两点，这个时候对IE和Chrome做兼容的时候就有问题了。因为IE中c的定位=a的定位+b的定位 而 Chrome中c的定位仅基于a ，和b这个直接父级的定位没有关系。因此在写定位（top,left,right,bottom）的时候就要给出不同的值了。

 

width:auto\100%

在IE中当我给div设置了width:100%并且同时设置了border:#333 solid 1px 这时IE浏览器出现了横向滑块。而Firefox和Chrome并没有出现横向滑块。究其原因：IE中border的设置是外描边，Firefox和 Chrome设置是内描边，不同就是外描边是加上而内描边是减去。本身width已经是100%的显示四边再加上1px超出了浏览器的容积所以就出现滚动 条了。因为IE和Firefox中div宽度默认就是充满容器的所以兼容就要写width:100%;\*Chrome*\ *width:auto;\*IE7,8 Firefox*\ -width:auto;\*IE6*\

 

display:block\none

在写a标记的时候经常会用到display:block 给a设置了display:block即使是不加<br/>也会换行。

在IE、Firefox、Chrome中display:block会充满父容器促使换行，这都是很正常的。不正常的是父容器的position是 absolute时，并且父容器也没有设置固定宽度的时候IE、Firefox会将父容器也充满。并不是按照a的内容的宽度扩充容器的容积。Chrome 则是按照a的内容的宽度来扩充容器的。这个时候想要几个浏览器显示一致就要给父容器一个固定宽度了。

转载于:https://www.cnblogs.com/miralce/archive/2013/02/23/2923384.html