Question

css： div边框border的浏览器兼容问题。

比如这样的一个页面布局，右侧div内还有两个div。加入页面宽度1000，左右div分别为200、800，但是如果加1px边框的话整体宽度就超过了1000，使得左右两个div无法浮动成水平并排，而且据说ie，chrome等浏览器对边框的处理也不相同，很可能chrome没问题ie下却乱了。想问高手这种情况一般怎么处理，边框是一定要加的，除了用图片代替以外还有别的办法吗？

Answer 1

现在浏览器对于边框的处理方式都是一样的，都是在原有宽度的基础上再加上边框的宽度。一般来说，比较好的作法是div在设定宽度的时候减去border的宽度。当然这样可能之前预设的整数宽度，例如200px，就会变成一个类似于198px的数值，在观感上让人略有不爽。所以对于IE8及以上版本的浏览器，可以使用box-sizing这个CSS3的样式，设置属性值为border-box，这样就可以让DIV的宽度等于内容+padding+border的宽度。具体的定义方法可以是下面这样：
.box {box-sizing:border-box; width:200px; border:1px solid #ccc;}
这样div的宽度就不会受到border、padding这些样式的影响了~~不过IE6和7是不支持这个属性的，使用的时候要留意~~

再补充一下，如果是希望宽度等于内容+padding+border的话，就可以这样定义：box-sizing:content-box;

追问

最后补充的这条ie6有效否？

追答

因为IE6本来就是按照content-box的方式来处理的，即使不能识别也没有关系，所以实际上用了这个样式就可以把所有浏览器给统一了。

Answer 2

设置宽度的div不加border，里面再加一层div，然后给里面的加border。

追问

ie6也没问题吗？

追答

没问题，有问题继续问吧

追问

比如div宽180px，那么里面加border的宽度也写成180px就可以？

Answer 3

边框是一共加了几像素，你就将边框所对应的块减去相对应的宽度就好了。这个是肯定兼容的

Answer 4

要是加border，应该是要减去对应的像素，不然肯定会超出的。。

Answer 5

根据盒模型，计算好每个元素的宽高。