Question

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

IE9不是内容块的中心。（我很确定IE的旧版本也没有用，但我不能肯定地说。）我已经确定有一个doctype并且我的代码是有效的。我申请了

text-align: center;

到内容块的父元素，但它不起作用。那么我想也许我会让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＆lt; 7（<!--[if lt IE 7]>）中。因此，请更改此评论或删除它。

补偿保证金：IE中为0自动

1 个答案: