第一 – 纯html表 – 在所有浏览器中都可以正常工作.
第二和第三个是带有表格列表单元格显示的CSS样式菜单
但是IE8不能正确地渲染它们.
有没有办法创建纯CSS菜单,在所有浏览器中都可以正常工作,并且与通常的表格菜单完全相同.
(只要表的行为,我需要更长的项目占用更多的空间和换行等)
我需要的是纯CSS解决方案,它不依赖于浏览器版本或类似的东西
解决方法
很多站点和人员报告显示：表格是由IE8支持,但它不能按需要工作.
> http://caniuse.com/#feat=css-table
> https://developer.mozilla.org/en-US/docs/Web/CSS/display
> Internet Explorer 8 bug with display: table
> https://sharepoint.stackexchange.com/a/73396
然而,我发现从http://quirksmode.org/css/css2/display.html#table开始的代码将根据需要显示IE10>浏览器模式：IE8但不是IE10>浏览器模式：兼容视图.
外带的是,你不应该依靠IE8对CSS的不好支持.尽管在各种浏览器和版本中都有单一的解决方案是很好的,但是在这一点上可能更容易适应较早的IE版本.此外,我同意the comment from this answer,因为表格可能是一个可能的选择：“老实说,如果你正在显示的是表格数据,那么使用一个表格,表格只能用于布局.
最后,您可以在这里找到有关推荐元标记的详细信息：What does <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> do?
代码示例
HTML
<p><code>display: table</code> tells the element to display as a table. Nested elements should be displayed as <code>table-row</code> and <code>table-cell</code>,mimicking the good old TRs and TDs.</p>
<div class="example">Live examples:
<br />This example has divs with display: table,table-row,and table-cell,all properly nested.
<div class="first table">display: table
<div class="second row">display: table-row
<div class="third cell">display: table-cell and some more content</div>
<div class="third cell">display: table-cell</div>
</div>
<div class="second row">display: table-row
<div class="third cell">display: table-cell</div>
<div class="third cell">display: table-cell</div>
</div>
</div>The outermost div of this example has display: block,and not table.
<div class="first">display: block
<div class="second row">display: table-row
<div class="third cell">display: table-cell and some more content</div>
<div class="third cell">display: table-cell</div>
</div>
<div class="second row">display: table-row
<div class="third cell">display: table-cell</div>
<div class="third cell">display: table-cell</div>
</div>
</div>This example has no divs with display: table-row
<div class="first table">display: table
<div class="third cell">display: table-cell and some more content</div>
<div class="third cell">display: table-cell</div>
</div>
</div>
CSS
div.example {
width: 25em;
border: 5px double;
padding: 5px;
}
div.example div {
margin: 0.5em;
padding: 0.5em;
}
.first {
border: 1px solid #cc0000;
}
.second {
border: 1px solid #00cc00;
}
.third {
border: 1px solid #0000cc;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
代码的实例
> http://quirksmode.org/css/css2/display.html#table
> http://jsfiddle.net/fttgtr7t/1/embedded/result/
> http://www.googledrive.com/host/0B5ttD8j8u9OLSUJvOGZBc3liS0k
