display:table-cell

随着ie6的退出,我发现以前好多不敢使用的属性可以使用了,先庆祝一下。

最近我要做一些页面,页面是交给程序猿使用的,程序猿是新手,对于样式什么的完全不懂(最让人发愁就是什么都不懂的人)。

由于某些原因,这些页面只需要兼容ie8以上的浏览器和现代浏览器就可以了。

我在做的时候使用了一下diaplay:table-cell,我发现了一些有意思的事,记录档案之中,原因未找到

<style type="text/css">
*{ margin:0; padding:0;}
.pre,.next{ 100px; height:100px; background:green;}

.table{ 500px; height:300px; border:1px solid red;}
.tr{ display:table-row;}
.td{ display:table-cell; height:100px; 100px; background:#000; border:1px solid #fff; color:#fff;}
</style>
</head>
<body>
<div class="table">
<div class="tr">
    	<div class="td">02215太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦太塔木德神奇啦</div>
        <div class="td">545151</div>
        <div class="td">545151</div>
        <div class="td"></div>
</div>
</div>

 这是一个模拟表格的方法吧,可能使用上有所不对,不过这不重要,重要的是,我发现在火狐下,如果几个display为table-cell的div并排显示的时候,你设置的高是多少,上面就会空出多少空间来,(注意这个只有在火狐下面有,其他的浏览器里都没有,包括ie8也没有),但是如果你在每一个div里面都写上字,所有的浏览器表现形式就都一样了,搞不明白,反正也在写,顺手记录一下,即使你设置的.td的宽,但是多了,还是会等比例缩小的,但是少了的话,宽度就是有左右的,这个应该跟真正的td是不一样的吧

原文地址:https://www.cnblogs.com/busicu/p/3342668.html