CSS布局属性display：table-cell

display：table-cell  在css2中的定义只有简单的一句话“table-cell : 　CSS2　将对象作为表格单元格显示”

css中有一个规则被称为“创建匿名表格元素的规则”，（以下文字整理自蓝色理想一篇文章），举例来说，如果某个元素已经被设置为“display:table-cell;”，而它的父节点（包含它的容器）没有被设置为“display:table-row;”属性，那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含，直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。

如果某个元素被设置为“display:table-row;”，而它的父节点没有被设置为“display:table;”（或者“display:table-row-group;”），浏览器将会创建一个被设置为“display:table;”的匿名盒对象来嵌套它，与之相邻的属性为“display: table-row;”的兄弟节点也都会被包含其中。同样，如果某个元素被设置为“display:table-row;”，但它的内部却缺少“display:table-cell;”的元素，那么一个匿名的table-cell将会被创建，用来包含该table-row中的所有元素。

我现在对上面的话的理解还不是很深刻，还没有具体化形象化。

我设置class名为content_a的display:table-cell;由于其相邻的div的display属性没有设置为table-cell，所以两个相邻div不会自动并为一组，即水平排列（我已做过测试，设置相邻div属性为table-cell，结果两个div成一排了。原因是父节点被默认创建了一个display:table-row;）所以IE，firefox下等是没有问题的。但是chrome谷歌浏览器对table-cell匿名盒（个人观点，仅供参考）创建规则与firefox有些差异，至于差异在何处，我具体也说不上来，我感觉就是与上面的叙述有出入。

ok，回到我的css代码。我当时的设想是：如果我将这种匿名盒规则让它明了化，会不会有效果呢，于是我就逐一修改测试。我将最外面的div的display属性设为table，原来display为table-cell的相邻结点的display属性设置为table-row（设置为table-cell会并排排列，上面已叙述），结果就好了。高度稍微调整，所有浏览器下的显示都一样了。