跨浏览器水平css菜单，表现为表格菜单。 IE8问题

时间：2014-11-06 16:53:14

标签： html css

我创建了三种表格菜单

see this example

首先 - 纯html表 - 在所有浏览器中都能正常工作 第二个和第三个是带有table-row table-cell显示的CSS样式菜单

但是IE8无法正确渲染它们。

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

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

5 个答案:

答案 0 :(得分：7)

调查结果

很多网站和人都报告IE8支持display: table，但它并没有按照预期的那样运作。

但是，我发现以下代码取自http://quirksmode.org/css/css2/display.html#table，将根据需要显示IE10＆gt;表格。浏览器模式：IE8但不是IE10＆gt;浏览器模式：Compat View。

外卖是你不应该依赖CSS对IE8的不良支持。虽然在各种浏览器和版本中提供单一解决方案会很好，但此时可能更容易适应旧的IE版本。此外，我同意the comment from this answer，因为表格可能是探索的可能选项：＆＃34;老实说，如果您显示的是表格数据，那么请使用表格。当用于布局时，表格只是邪恶的。＆＃34;

最后，您会在此处找到推荐元标记的详细信息：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;
}

实时代码示例

包括用于测试目的。我从相同的代码中找到了不同的结果。

答案 1 :(得分：3)

第2和第3表的兼容性问题将通过网页<head>部分中的以下链接解决：

<meta http-equiv="X-UA-Compatible" content="IE=8" />

有关详细信息，请查看Internet Explorer开发人员中心的THIS页面

答案 2 :(得分：2)

在处理IE时，您应始终将此标记放在头部：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

指示它使用最好的内置标准模式。

等式的第二部分是DTD：当解析具有不同DTD的页面时，IE以奇怪的方式行动;维基百科有a great list of what happens in each case，然后是IE8：

4.01严格使用系统标识符：标准 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

4.01严格没有系统标识符：标准 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

4.01过渡与系统标识符：几乎标准 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4.01没有系统标识符的过渡：怪癖 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

HTML5：标准 

<!DOCTYPE html>

使用XHTML等等。我强烈建议您使用HTML5。

由于我没有IE8可用于测试它，所以这是一个很长的镜头...只需尝试使用IE=edge和HTML5 doctype并告诉我们。

答案 3 :(得分：1)

您是否尝试过将respond.js和html5垫片添加到您的头部以强制支持旧浏览器中的HTML5元素？

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

将它放在文档的头部。这应该有助于IE8识别“display：table;”选择器。

答案 4 :(得分：1)

我可能会推荐bootstrap或Angular。人们使用这些是有原因的。但是，您可能需要实施一些css技巧。记得IE8是在90年代末期。因此，只有标签才能发挥最佳效果。

我注意到使用em（1 = 16像素）位置相对并移动＆＃34;顶部，底部，左侧＆＃34;工作得很好。表也​​是理想的，也使用显示块。

确保始终拥有单独的css文件。

<!--[if lt IE 8]>
  <script src="YOUR FILE HERE"></script>
<![endif]-->

另外好的提醒是： 溢出：工作休息将无法在IE8中使用 - ＆gt; overflow-wrap：break-word; 2.如果px或％不起作用，则尝试使用em - ＆gt;这个值是每1em 16px。所以.125em是16像素的12.5％ 3. IE7和IE8仅支持这些CSS3选择器：常规兄弟（element1~element2）和属性选择器[attr ^ = val]，[attr $ = val]和[attr * = val] 4.仅支持内容框和边框值，而不支持padding-box（稍后添加到规范中）。 5. border-radius不起作用

相关问题
最新问题