Question

Salam（意为你好）：）

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

enter image description here

如何在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>

Answer 1

问题在于IE无法呈现页面，因为它的最新版本adding a X-UA-Compatible meta tag让我们可以选择应该将哪个版本的IE呈现给页面，将其设置为最新版本（边缘））版本解决了问题：

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

显示：表格和display：table-cell在IE9中不起作用

1 个答案: