不同浏览器上display:table-cell属性的不同渲染

不同浏览器下display:table-cell属性的不同渲染

????? display:table-cell;属性就是让元素以表格的形式呈现。设置以后就可以利用表格的属性了。但是笔者发现，不同浏览器对这个属性的渲染是有区别的，希望提出来以便大家得到重视。

首先，ie6，ie7是不支持这个属性的暂时忽略。

????? ie8、Firefox、Chrome对这个属性是支持的。这一次ie8与Chrome巧合的统一了，而Firefox反到成了另类。

当我们给一个div设置了display:table-cell属性后，又设置了边框的情况下，区别就很清楚了。

????? 例如我们设置一个宽度和高度同时为100的div，变宽设置为10px。这时候我们在IE和Chrome中得到了一个包括边框在内宽度和高度都为120的方块。

????? 但是在Firefox中却不是如此，我们得到的是一个宽120.高100的矩形。在这里我们看到，在Firefox中，计算高度的时候，浏览器把边框也计算在了总高度之中，这一点是值得我们特别注意的。只能加hack还处理了。