如何在IE中使用渐变包装背景居中内容DIV?

时间:2011-08-27 10:11:19

标签: html css internet-explorer

适用于Firefox,Safari和Chrome,但不适用于IE。我尝试了width然后margin-left:auto;margin-right:auto;请帮忙。

这是链接 http://www.ellenselbiedesign.com/public/testing/index.html

这是我的CSS

* {
padding: 0px;
margin: 0px;
}

.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
background: #aad3d9; /* old browsers */
background: -moz-linear-gradient(top, #80BCC5 0%, #ffffff 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80BCC5), color-stop(100%,#ffffff)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80BCC5', endColorstr='#ffffff',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */

#body-wrapper {
height: 100%;
width: 100%;
}

#header {
width: 960px;
margin-left:auto;
margin-right:auto;
}

#header img {
padding-top: 15px;
}

#header p{
color: #784f78;
font-size: 15px;
font-family: Arial, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:right;
margin-top: -33px;
line-height:90%
}

2 个答案:

答案 0 :(得分:1)

<!-- https://stackoverflow.com/questions/4657553/how-to-get-css3-gradient-to-span-the-height-of-the-entire-page-not-just-the-view -->

祝贺。您的IE现在处于Quirks模式。在Quirks模式下,IE的行为类似于IE5.5,因此它不支持margin: 0 auto。尝试在<!DOCTYPE>之前删除评论,因为<!DOCTYPE>之前的评论会导致IE使用Quirks模式。

答案 1 :(得分:0)

给text-align:center;到父元素并在元素本身中将其设置为左侧

#body-wrapper { text-align: center }
.wrapper { text-align: left }