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>
效果如下:
若使用等高布局:
<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>
使用了等高布局,效果如下:
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用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{}
参考链接
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。