浏览器兼容汇总

来源：互联网发布：mac压缩工具编辑：程序博客网时间：2024/05/16 16:04

1、a元素margin-bottom:50px; b元素margin-top:30px;他们两个之间的间距取最大值：50px，而不是50px+30px。

2、ie6 3px bug

当浮动元素和不浮动元素挨着的时候就会出现3px bug，网上绝大部分的解决方法都是不考虑div2被遮住这种情况，为了让div2不被div1遮住，css hack应该这么写：

*{ padding:0; margin:0;}.div1{ float:left; width:100px; height:100px; background:blue; _margin-right:-3px;}.div2{ width:200px; height:100px; background:red; margin-left:100px; _margin-left:-97px;}

<div class="div1">dha</div><div class="div2">1111111111111agg</div>

3、ie6下父容器相对定位子元素绝对定位，bottom:0; 子元素不随父元素的高度变化而变化。暂时还没找到原因，先用jq解决了。

css

*{ margin:0; padding:0; font:normal 12px/24px Arial, Helvetica, sans-serif;}ul,li{ list-style:none;}.menu{ width:500px; border:1px solid #ccc; background-color:#eee; word-break:break-all; position:relative;zoom:1; padding:30px;}.yuan{ color:red; position:absolute; bottom:0px; left:50%; background-color:#ccc; width:60px; height:40px; text-align:center; line-height:40px; cursor:pointer;}

HTML

<div class="menu"><div>sjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdb</div>    <p>sjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdb</p>    <p>sjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdb</p>    <p>sjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdb</p>    <p>sjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdb</p>    <p>sjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdbsjvgajsdb</p><div class="yuan">点击我</div>    <div class="cl"></div></div><script>$(function(){$(".yuan").click(function(){$("p").toggle()$(".menu").height("auto")h=$(".menu").height()$(".menu").height(h)$(this).css("bottom","0px")})})</script>

这样ie6效果与火狐效果相同，点击按钮就会随着高度的变化而变化。

4、解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

在IE6,IE7下，子元素使用position:relative、父元素使用overflow:auto后，我们预期的是滚动条滚动时，子元素也随着滚动，实际情况是内容不滚动，就感觉你是定位定在那里了。

解决办法是父元素添加position:relative样式。

5、文字竖排，writing-mode:lr-tb | tm-rl 这种方法只适用于ie ，但是火狐不认识这种写法，为了兼容性可以采用下面这种方法，用div包裹文字，宽度时文字的1.5倍[不绝对]，右浮动即可

.con{ width:20px; font-size:12px; height:200px; overflow:hidden; background-color:#eee; text-align:center; float:right; margin-left:5px;}<div class="con">大江东去</div><div class="con">苏轼</div><div class="con">大江东去</div><div class="con">浪淘尽</div><div class="con">千古风流人物</div><div class="con">故垒西边人道是</div>

6、双倍边距问题

IE6双倍边距就是指当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍,解决方法是display:inline;

7、

0 0