Crossbrowser横向CSS菜单，表现为表格菜单。 IE8问题 [英] Crossbrowser horizontal css menu that behaves as table menu. IE8 issue

查看：91
本文介绍了Crossbrowser横向CSS菜单，表现为表格菜单。 IE8问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了三个表格菜单变体



查看这个例子



第一个纯html表 - 在所有浏览器中都能正常工作。

第二个和第三个是CSS样式菜单，其中 table-row table-cell 显示



但是IE8不能正确显示它们。



是否有创建纯CSS菜单的方法，可以在所有浏览器中正常工作，并且与通常的表格菜单完全相同？

（我需要更长的项目占用更多的空间，并且只要表格有行为就包装成行）

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

解决方案

调查结果



很多网站和人都报告说IE8支持 display：table ，但它不能按需要工作。 p>



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



值得注意的是，您不应该依赖于IE 8对CSS的不良支持。尽管在各种浏览器和版本中都有单一的解决方案会很好，但在这一点上，容纳旧的IE版本可能更容易。此外，我同意来自此答案的评论，因为表格可能是探索的一个可能选项：老实说，如果你是什么



最后，您会在这里找到推荐元标记的详细分类信息：什么< ; meta http-equiv =X-UA-Compatible含量=" IE =边缘">做什么？



代码示例



HTML 



 < p>< code> display：table< / code>告诉元素显示为表格。嵌套元素应显示为< code> table-row< / code>和< code> table-cell< / code> ;,模仿好的旧TR和TD。< / p> 
< div class =example>现场示例：
< br />本示例使用display：table，table-row和table-cell的div进行正确嵌套。 
< 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>这个例子的最外面的div有display：block，而不是table。 
< div class =first> display：block 
< 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 class =second row> display：table-row 
< div class =third cell> display：table-cell< / div> 
< div class =third cell> display：table-cell< / div> 
< / div> 
< / div>这个例子没有显示div：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; 
填充：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; 
 
 $ / code>



代码的实例



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




I've created three variations of table menu

see this example

first - pure html table - works fine in all browsers.
Second and third are the CSS styled menu with table-row table-cell displays

But IE8 doesn't render them correctly.

Is there a way to create pure CSS menu that works fine in all browsers and acts exactly as usual table menu?
(I need longer items take up more spaces and wrap into rows etc as long as table behaves)

What I need is pure CSS solution which doesn't depend on browser versions or something like this

解决方案

Findings

A lot of sites and folks report that display: table is supported by IE8, but that it doesn't work as desired.

However, I found the code below, taken from http://quirksmode.org/css/css2/display.html#table, will display the tables as desired with IE10 > Browser Mode: IE8 but not with IE10 > Browser Mode: Compat View.

The takeaway is that you shouldn't rely on the poor support of CSS with IE8. Although it would be nice to have a single solution across various browsers and versions, it's probably easier at this point to accommodate older IE versions. Also, I agree with the comment from this answer as tables could be a possible option to explore: "Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout."

Finally, you'll find an extensive breakdown of the recommended meta tag here: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

Code Example

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;
}

Live Examples of Code

Included for testing purposes. I find different results from the same code.

这篇关于Crossbrowser横向CSS菜单，表现为表格菜单。 IE8问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆