首页 > 代码修改 > 关于CSS排版中各浏览器兼容的必胜法宝
2011
10-08

关于CSS排版中各浏览器兼容的必胜法宝

这几天在网站维护中发现了一个可以让各大浏览器兼容的方法:利用网页元素之间的绝对定位彻底解决网页布局中的兼容问题。

下面就以下图所示的网页布局来说明下如何使用绝对定位以达到即可以显示三列布局又可以让各个浏览器兼容:

关于CSS排版中各浏览器兼容的必胜法宝 - 第1张  | 心岛博客

我所遇到的问题是#1设置一个总宽度,然后#2和#3都使用了左浮动,但是再对#4使用左浮动或右浮动时都会导致#4所在的列出现在下一行,而没有同#2\#3同行显示,经过多方一直没有找到很好的解决办法,但是逐条排查#3内的元素宽度是个非常费力的活,所以本人对#4进行了绝对定位!让其永远相对于#1的位置进行绝对定位。

首先需要设置外层的#1{position:relative;},然后对#4设置绝对定位代码:#4{position:absolute; right:0; top:0;}这样#4所在的列就会紧贴在#1的右上角显示,如果需要增加边距可以设置margin或者padding属性来增加。

注意:

1、设定padding属性须注意:在IE6下padding的宽度或者高度不会被计入边框的总长或者总高中,所以如果你设width:300px;padding-right:20px;在IE6下就会显示为width:320px;在FF和IE7等浏览器中的宽度则为300px,所以这里需要这样设置:width:300px;_width:280px;padding-right:20px;

2、在IE中浮动元素使用margin会出现双倍边距的情况,为了修复此bug只需将其margin属性后附加一个display:inline;就可以完美修复!

好了,以上就是最近在修改、维护网站模版过程中的一点心得,可能有不够准确的地方,希望各位多多指教!

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

关于CSS排版中各浏览器兼容的必胜法宝》有 24 条评论

留下一个回复

你的email不会被公开。