我有一些CSS和HTML，它成功地将div放在页面上，并且不包含固定宽度，只包含百分比。
<html>
<head>
<title>Centered Div</title>
<style type="text/css">
body{
background-color: #3d3d3d;
color: #ffffff;
font-family: Arial;
}
.QuoteContainer{
/* Contains Quote Name, Quote Text */
height: 50%;
width: 80%;
margin: auto;
position:absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: table;
}
.QuoteWrap{
display: table-cell;
vertical-align: middle;
}
.QuoteTop{
/* Quote Text */
background-color: #515151;
background-image: url('Quotation.jpg');
background-repeat: no-repeat;
padding: 20px;
font-size: 18pt;
}
.QuoteBottom{
/* Quote Name */
background-color: #2e2e2e;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="QuoteContainer">
<div class="QuoteWrap">
<div class="QuoteTop">Vivamus feugiat hendrerit tortor. In hac habitasse platea dictumst. Vivamus eu rhoncus nisi. Nunc metus mi, condimentum eget mauris nec, ornare ullamcorper nunc. Curabitur luctus augue id enim consequat ornare. Sed enim justo, fringilla ac ultricies a, sodales eu massa?</div>
<div class="QuoteBottom">Michael Smith</div>
</div>
</div>
</body>
</html>
问题是它在Chrome中正确呈现，但在IE中却没有。
任何人都有任何想法如何让IE显示相同的内容？
答案 0 :(得分：0)
只要使用浮动或绝对位置，显示就没用了。
显然，通过coordonates的XY自动边距技术在IE11中不起作用，但是display;table。因此，混合使用方法，使用一个方法:)。
的 DEMO
body{
background-color: #3d3d3d;
color: #ffffff;
font-family: Arial;
}
html, body ,
.QuoteContainer{
height:100%;/* inherits window's/parent's height */
width:100%;/* inherits window's/parent's width */
margin:0;
}
.QuoteContainer {
display: table;
}
.QuoteWrap {
display: table-cell;
vertical-align: middle;
}
.QuoteTop{
/* Quote text */
background-color: #515151;
background-image: url('Quotation.jpg');
background-repeat: no-repeat;
padding: 20px;
font-size: 18pt;
width: 80%;
margin:auto;
}
.QuoteBottom{
background-color: #2e2e2e;
padding: 10px 20px;
padding-bottom: 10px;
font-weight: bold;
width: 80%;
margin:auto;
}