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

Question

我创建了三种不同的表格菜单

看这个例子

第一个 - 纯html表 - 适用于所有浏览器.
第二个和第三个是带有table-row table-cell显示的CSS样式菜单

但IE8无法正确呈现它们.

有没有办法创建纯CSS菜单,在所有浏览器中都能正常工作,并且与通常的表菜单完全一样？
(只要表行为,我需要更长的项占用更多的空间并包装成行等)

我需要的是纯CSS解决方案,它不依赖于浏览器版本或类似的东西

Answer 1

发现

display: tableIE8支持很多站点和人员报告,但它不能按预期工作.

• http://caniuse.com/#feat=css-table
• https://developer.mozilla.org/en-US/docs/Web/CSS/display
• 带有display:table的Internet Explorer 8错误
• https://sharepoint.stackexchange.com/a/73396

但是,我发现以下代码取自http://quirksmode.org/css/css2/display.html#table,将根据需要显示IE10>浏览器模式:IE8但不符合IE10>浏览器模式:Compat视图.

需要注意的是,你不应该依赖CSS对IE8的不良支持.虽然在各种浏览器和版本中提供单一解决方案会很不错,但此时可能更容易适应较旧的IE版本.此外,我同意这个答案中的评论,因为表格可能是一个可能的选择:"老实说,如果您显示的是表格数据,那么使用表格.表格在用于布局时只是邪恶的."

最后,您会在此处找到推荐元标记的详细信息:<meta http-equiv ="X-UA-Compatible"content ="IE = edge">是什么？

代码示例

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