CSS如何利用padding和margin正负相消实现多列等高?

目前我用过最好的就是这个方法了,浏览器兼容性最好最简便。
首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度就会被撑到它里面最高那列的高度,其他比这列矮的列则会用它们的padding-bottom来补偿这一部分的高度差,因为背景是可以用padding占用空间里的,而且边框是会跟随padding变化的。

没有正负相消时,出来的样式是这样的:

<style>
    body{
        padding:0;
        margin:0;
        color:#f00;
    }
    .container{
        margin:0 auto;
        width:600px;
        border:3px solid #00c;
    }
    .left{
        float:left;
        width:150px;
        background:#b0b0b0;
    }
    .right{
        float:left;
        width:450px;
        background:#6cc;
    }
</style>
<body>
    <div class="container">
        <div class="left">我是left</div>
        <div class="right">我是right
        <br>
        <br>
        现在我的高度比left高,所以出现了脱节现象
        </div>
    </div>
</body>

效果如下:

clipboard.png

若使用等高布局:

<style>
    body{
        padding:0;
        margin:0;
        color:#f00;
    }
    .container{
        margin:0 auto;
        width:600px;
        border:3px solid #00c;
    }
    .left{
        float:left;
        width:150px;
        background:#b0b0b0;
        padding-bottom:2000px;
        margin-bottom:-2000px;
    }
    .right{
        float:left;
        width:450px;
        background:#6cc;
        padding-bottom:2000px;
        margin-bottom:-2000px;
    }
</style>
<body>
    <div class="container">
        <div class="left">我是left</div>
        <div class="right">我是right
        <br>
        <br>
        现在我的高度比left高,所以出现了脱节现象
        </div>
    </div>
</body>

使用了等高布局,效果如下:

clipboard.png

经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

1.png24的图片在IE6上会出现背景
解决方案是做成png8.

2.浏览器默认的margin和padding不同
解决方案:加一个全局的*{margin:0;padding:0;}来统一.

3.IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6设置下的margin会比较大
例如:以下代码在IE6就会在产生双倍距离

#box{
    float:left;
    width:10px;
    margin:0 0 0 10px;
}

这种情况下在IE中会产生双倍的距离,解决方案是在有float的标签中样式控制加入_display:inline,将其转换为行内属性(_这个符号只有在IE6下会识别
其他的识别规则:

.bb{
    background-color:red;
    background-color:#00deff\9;/*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/
}

4.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性
在firefox中只可以使用getAttribute()来获得自定义属性
所以获得自定义属性一律使用getAttribute().

5.IE下,event会有x,y属性,但是没有pageX和pageY属性,对于firebox有pageX和pageY熟悉,但是没有x,y属性

6.chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方案:css属性中-webkit-text-size-adjust:none;解决.

7.超链接访问后hover样式不出现
解决方案:被点击访问过的超链接样式不再具有hover和active,这时候要注意CSS顺序即可解决:
L-V-H-A a:link{} a:visited{} a:hover{} a:active{}
参考链接


少年版
171 声望14 粉丝

希望自已给力一点,再多努力一点