display：table& display：table-cell在IE9下不工作 [英] display:table & display:table-cell not working in IE9
问题描述
Salam（表示你好）：）
我试图使用 display：table & display：table-cell 。它工作正常在Firefox和chrome，我知道 可用）
<！DOCTYPE HTML PUBLIC DTD HTML 4.01 Frameeset // EN>
< html>
< head>
< title> test< / title>
< meta http-equiv =Content-TypeContent =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>
问题是IE不呈现页面作为最新版本，添加 X-UA兼容元标记让我们选择哪个版本的IE应该渲染页面，将其设置为最新（边缘）版本解决了问题：
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
Salam (means Hello) :)
I'm trying to implement a 3 column layout for my web page using display:table & display:table-cell. It works fine in firefox and chrome, and I know that this feature should be supported in IE 9, but all I achieved so far is no more than this screenshot:
how can I get this to work in IE 8+ ?
here is my complete code:
(JS Fiddle available)
<!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>
The problem is that IE doesn't render the page as it's latest version, adding a X-UA-Compatible meta tag lets us to choose which version of IE should render the page, setting it to the latest (edge) version solves the problem:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
这篇关于display：table& display：table-cell在IE9下不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
