显示:table是一个完全可以接受的等高柱的方法吗？

Question

我正在建立一个响应式设计,我需要两个相同高度的列.我不想依赖JavaScript,我希望列之间有空格,以增加清晰度.

我做了两个布局; 一个使用display:table;,另一个使用float和position.这里的问题是我似乎无法让后一种方法在列之间有空格,而table方法在这方面工作正常.

因此,我理想地喜欢使用表格方法,但我想知道这是否是一种可接受的方法来实现一个使用现代网络标准的网站的等高柱设计？

CSS表支持研究

通过一些研究,我发现该display:table方法与以下浏览器兼容(通过支持我需要的所有必要的CSS属性):

• Chrome 1+
• Firefox 1+
• Internet Explorer 8+
• Safari 1.2+
• Opera 7+
• Android 2.1+
• iOS 3.2+
• 黑莓6+
• Internet Explorer Mobile 9+(Windows Phone 7+)
• Opera Mobile 10+
• Opera Mini 5+
• 诺基亚浏览器7.3+(Symbian Anna)
• 诺基亚浏览器8.5+(诺基亚N9上的MeeGo 1.2)

谷歌搜索"CSS CSS显示表是个好主意吗？" 揭示了一些反对CSS表方法的文章,特别是这篇文章,我一直在阅读.我知道它已经有好几年了,所以考虑到我上面发现的浏览器支持水平,现在这个方法的整体接受程度到底是什么？

笔记

• 我想放弃对Internet Explorer 7及以下版本的支持,我不确定Firefox 3及以下版本(对建议开放).

• 此外,我通常希望在较旧的浏览器/浏览器版本中进行测试,但我的笔记本电脑没有足够的RAM来运行虚拟机,并且下载必要的文件需要花费数小时才能完成10-20 Mb/s的不定连接.有没有其他选择(房子里的所有其他电脑也没有旧的浏览器)？

谢谢!

参考

• 我自己在Chrome 30,Firefox 24/25,Safari 5.1.7,Opera 17,IE 10/11,IE8/IE9中使用IE10开发人员工具和Android 4.1.1进行测试.
• W3Schools CSS参考 - 显示 ; 边界崩溃 ; 边界间距 ; 溢出
• MDN CSS参考 - 显示 ; 边界崩溃 ; 边界间距 ; 溢出
• QuirksMode CSS Reference(向下滚动到'Index'部分)
• IE6-10中的MSDN CSS兼容性 - 显示 ; 边界崩溃 ; 边界间距 ; 溢出
• 我可以使用... CSS表

Answer 1

是的，看看Bootstrap的源代码，他们是这样网格化的

在浏览器中查找

display: table;

你会看到他们如何在 .row 中实现它