显示：表格和显示：表格单元格在 IE9 中不起作用答案

【问题标题】：display:table & display:table-cell not working in IE9显示：表格和显示：表格单元格在 IE9 中不起作用
【发布时间】：2014-02-17 01:38:34
【问题描述】：

Salam（意思是你好）:)

我正在尝试使用 display:table 和 display:table-cell 为我的网页实现 3 列布局。它在 firefox 和 chrome 中运行良好，我知道this feature should be supported in IE 9，但到目前为止我所取得的只是这个截图：

我怎样才能让它在 IE 8+ 中工作？

这是我的完整代码：

（JS Fiddle可用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width:100%;
            margin:0;
            padding:0;
        }
        .container{
            display:table;
            width:100%;
            border-collapse:separate;
        }
        .col{
            display:table-cell;
        }
        .side-1{
            width:200px;
            background: #efefef;
        }
        .side-2{
            width:200px;
            background: #f8f8f8;
        }
        .content{

        }
        #header,#footer{
            height:40px;
            background: #e4f3fd;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div class="container">
    <div class="col side-1">
        sidebar 1
        <br>.<br>.<br>.
    </div>
    <div class="col side-2">
        sidebar 2
        <br>.<br>.<br>.
    </div>
    <div class="col content">
        content
        <br>.<br>.<br>.
    </div>
</div>
<div id="footer">footer</div>
</body>
</html>

【问题讨论】：

使用 IE8 为我工作，但请注意使用 table 或 CSS table 显示元素 is not appropriate for layout purposes。还有一件事，在 CSS table layouts 中，所有元素 should follow the same structural properties.

标签： html css internet-explorer cross-browser

【解决方案1】：

问题是 IE 没有将页面渲染为最新版本，adding a X-UA-Compatible meta tag 让我们选择哪个版本的 IE 应该渲染页面，将其设置为最新（边缘）版本即可解决问题：

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

【讨论】：

如果这没有帮助怎么办？我的网站几乎可以在除 IE 之外的所有浏览器中运行