display:table&display:table-cell在IE9中不起作用
Nas*_*ade 1 html css internet-explorer cross-browser
萨拉姆(意为你好):)
我正在尝试使用display:table&为我的网页实现3列布局display:table-cell.它在firefox和chrome中运行良好,我知道IE 9中应该支持这个功能,但到目前为止我所做的只不过是这个截图:
我怎样才能在IE 8+中使用它？
这是我的完整代码:
(JS小提琴可用)
<!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>
Nas*_*ade 10
问题是IE不会将页面呈现为最新版本,添加X-UA-Compatible元标记可让我们选择应该呈现页面的IE版本,将其设置为最新(边缘)版本可以解决问题:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
| 归档时间： |
|
| 查看次数： |
15763 次 |
| 最近记录： |