Div加边框后的浏览器兼容性问题解决

千万不要怪我最近博文更新的越来越慢了,因为最近实在是太忙,白天在公司一般呆到七八点钟,晚上回来还要抓紧时间做一个网站,每天只睡五六个小时。实在是春宵一刻值千金,时光恨短啊!昨天生日,女朋友叫许三个愿望。其实我还有两个愿望:一个是不用吃饭,还有就是不用睡觉,既省钱又省时间,不过觉得不太可能实现所以就没敢许…
话入正题,由于最近本人最近在写一个新站的页面,所以又积累了一点小小的收获。以前写页面一直最头疼的就是浏览器的兼容问题,特别是IE6,一想起来我就头大。以前做博客主题的时候就有一个问题始终没有解决,包括现在这个主题依然没能很好的兼容IE6。问题主要在于div加border后左右并排布局后在IE6下无法兼容。
举例如下图的一个页面布局:

布局示例

 

中间为两个左右布局的大div。如果页面宽度为1000,左边的大div为200,右边为790,border为1px,间距10px。在目前主流浏览器下,只要一个float便可以将两个div拉到一排。但是在IE6下无法正常显示,不是float没有发力,而是因为多了1px的border,两个div的左右border加在一起就是4px,由于IE6对border的处理方式与目前其他主流浏览器不同,就相当于使页面宽度变成了1004px,但我们已经固定了宽度为1000px,所以兼容性bug就出来了。

解决方法:

一、嵌套div。还是用上边这个布局作为例子,先将左右两个大div设置好宽度为200px、790px,但不设置border。然后在宽度为200px的div中套入一个宽度为198px的div,并将此div设置1px的border;在宽度为790的div内套入一个宽度为788px的div,并设置border为1px。写好float和外间距后在IE6下测试一下,完全正常。

二、使用CSS3的box-sizing,属性值设置为border-box。未亲测,感兴趣的同学可以自己试试。

发表评论

16 条回应

  1. 斌果说道:

    对于使用百分比布局的网页来说,边框很容易就让板块错位

  2. 阿树说道:

    居然还在支持IE6…..

    两个大DIV不要设置magin属性,然后一个float:left;一个float:right;可以吗

  3. fengqiwuc说道:

    老大,期待,期待呀

  4. yingying说道:

    加油!现在国内貌似还有很多人用IE6,是吗?我这里很多公司已经不支持IE7了

    1. 小雨说道:

      目前国内排名第一IE8,其次IE6。都是各种电脑商城装机版、一键ghost给闹的。

      1. yingying说道:

        原来是ghost搞得。。

  5. Tokin说道:

    不知道有没有办法在容器内部加一个1px的。。。

    1. 小雨说道:

      这就是在内部加,只不过是加了一个div

  6. 木头怀说道:

    css不懂啊,怎么在背景上添加一些纹理呢?

    1. 小雨说道:

      什么纹理~

  7. yxiao说道:

    路过

  8. 戈美其说道:

    IE6基本可以放弃了,调来调去的真麻烦

    1. 小雨说道:

      要不是天朝还有20%的用户量早就不理ie6了。。

  9. 小A说道:

    CSS滤镜一句搞定黑白~~~(*^__^*) ,小雨,午休时间抽个空来看看你~ [口水]

  10. 让让说道:

    怎么实现的全站黑白色?

    1. 小雨说道:

      CSS的滤镜效果,一句搞定。 [大笑]