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、