html – Crossbrowser水平css菜单,表现为表格菜单. IE8问题

我创建了三种表格菜单

see this example

第一 – 纯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