css - 补偿 margin : 0 auto in IE

Question

您可以在此处查看实时版本:http://steffiwilson.com/test .

IE9 没有将内容 block 居中。 (我很确定旧版本的 IE 也不能正常工作，但我不能肯定地说。)我已经确保有一个文档类型并且我的代码是有效的。我申请了

text-align: center;

到内容 block 的父元素，但它不起作用。所以我想也许我会让 IE 转到一个 js 文件，通过给它一个绝对位置来覆盖它，但我通过警报语句确定它没有通过这里的第三行。

screenwidth = document.documentElement.clientWidth;
sidespace = ((screenwidth - 700)/2) + "px";
document.getElementById("content").style.position = "absolute";
document.getElementById("content").style.left = sidespace;

有什么想法吗？我愿意做任何有用的事情——CSS 或 Javascript。我想知道是否是我的 stickyfooter 代码导致了这些问题。

以下是我的 CSS 的相关部分:

* {
margin:0;
  padding:0;
} 

html, body {
  height: 100%;
  text-align: center;
}

body {
  background-color: #c1e9e9;
  background-image: url('images/background.png');
  background-repeat: repeat-y;
  background-position: center;
  min-width: 750px;
}

#wrap {
  min-height: 100%;
  text-align: center;
}

#main {
  overflow:auto;
  padding-bottom: 150px;
  text-align: center;
}

#content {
  width:700px;
  margin:0 auto;
  text-align:left;
  padding:15px;
}

#footer {
  position: relative;
  margin-top: -150px; 
  height: 150px;
  clear:both;
  text-align: center;
  background-image: url('images/dog.png');
  background-repeat: no-repeat;
  background-position: center;
  /*"sticky footer" design credit to www.cssstickyfooter.com*/
} 


/*Opera Fix for sticky footer */
  body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;
}

table {
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-collapse: collapse;
}

Answer 1

#wrap错位，所以对齐 #content或 #main不会工作。更改 #wrap 的规则到

#wrap {
  margin:0 auto;
  min-height: 100%;
  text-align: center;
}

它将在 IE 中工作。

编辑:#wrap未对齐，因为您将其显示属性设置为 display:table在有条件的评论中。据我所知，您不想在 IE6,8,9 ( <!--[if !IE 7]> ) 中使用它，但在 IE<7 ( <!--[if lt IE 7]> ) 中。因此，请更改或删除此评论。