专门解决IE6z兼容性问题个人整理.docxVIP

-1 不同浏览器对浮动float和相邻不浮动对象的解析不同IE会让相邻的也浮动起来，Chrome 和FF不会，他们的float对象不再占据空间，所以显示效果也不同。Chrome 下IEstylebody{padding:0;margin:0;}#yi{background:#0033FF;height:298px;width:298px;padding:1px;}#er{background:#FF0000;width:30px;height:30px;float:left;}#er2{background:#00FF00;width:30px;height:30px;float:left;}#san{background:#00FFFF;width:230px;height:90px;border:1px #00FFFF solid;}/style/headbodydiv id=yidiv id=er/divdiv id=er2/divdiv id=san/div/div/body/htmlie6常见css bug一、IE6双倍边距bug如下图所示，一个样式里面既设定了“float：left；”又有“margin-left：100px；”的情况，就呈现了双倍情况。如外边距设置为100px， 而左侧则呈现出200px，解决它的方法是在浮动元素上加上display:inline;的样式，或者尽量少用这种形式，这样就可避免双倍边距bug。IE6和FF下：二、3像素问题及解决办法问题：2列布局。左列固定，右列液态当使用float浮动容器后，在IE6下会产生3px的空隙，有意思的是右侧容器没设置高度时3px在右侧容器内部，当设定高度后又跑到容器的左侧了。解决方法有几种，对于网上非常流行的给右侧div增加margin-right: -3px我不是很赞同，大大增加了布局的复杂度并且如果父div有设置浮动的话就会失效，解决方法：可以同样给右侧设置左浮动。(还有其他方法) IE6和FF下：三、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？这种情况可在父窗口加上 overflow:hidden/overflow:auto;zoom:1;这两个样式属性，overflow:auto; 是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持!--[if IE]这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的!--[if IE]中，这样应该可以通过验证了。四、超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A（一般现在只用hover就可以了）a:link {color: #1f3a87; text-decoration:none;}a:visited {color: #83006f;text-decoration:none;}a:hover {color: #bc2931; text-decoration:underline;}a:active {color: #bc2931;}五、li在IE中底部3像素的BUG（增加浮动解决问题）设计原型：两个红色中间是li1px的底边框；在IE6，IE7下显示为（如图）：貌似li多了个 margin-bottom:3px；解决方案：在li上加float:left；问题解决了，当然根据设计稿的精神还要加个width:100%；以前我们老是研究清除浮动，想不到今天却用增加浮动来解决问题六、li在IE中底部空行的BUGli在IE中底部出现的不是3像素而是一整条空白行CSS样式代码如下：* {padding:0;margin:0;}li { }li a {background:#CCC; border-bottom:1px #000 solid; text-decoration:none; display: block; }li a:hover {background:#BBB;}IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。解决方案1：在li a 样式中加入zoom:1；解决方案2：在li 样式中加入display:inline；解决方案3：在li a 样式中加入widt