跨浏览器水平CSS菜单，其作用与表格菜单相同。IE8问题

El Dude 发表于 Dev

花花公子

我创建了表格菜单的三种变体

看这个例子

首先-纯html表-在所有浏览器中均可正常运行。
第二和第三是带有table-row table-cell显示的CSS样式菜单

但是IE8无法正确呈现它们。

有没有一种方法可以创建在所有浏览器中都可以正常工作并且与通常的表菜单完全一样的纯CSS菜单？
（我需要更长的项目占用更多的空间并包装成行等，只要表格表现良好）

我需要的是不依赖浏览器版本或类似内容的纯CSS解决方案

JSuar

发现

display: tableIE8支持许多站点和人们的报告，但是它不能按预期运行。

但是，我发现以下代码取自http://quirksmode.org/css/css2/display.html#table，将根据需要使用IE10>浏览器模式：IE8显示表，但不显示IE10>浏览器模式：兼容看法。

要点是，您不应该依赖IE8对CSS的不良支持。尽管跨各种浏览器和版本使用单一解决方案会很不错，但此时容纳旧版本的IE可能会更容易。另外，我也同意这个答案的评论，因为表可能是探索的一种可能选择：“老实说，如果要显示的是表格数据，则使用表。表仅用于布局时才是邪恶的。”

最后，您将在此处找到推荐的meta标签的详细内容：<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;
}