Question

我试图将页面居中。该页面以chrome和FF为中心显示。 IE推动左侧的一切。令我感到困惑的是，我正在为多个页面使用1个样式表，并且其中几个页面在所有浏览器中都是正确的。最好的猜测是我在页面上设置的样式产生了错误的格式。

唯一有效的解决方案是，如果我应用text align: center，但这对于他们的其他几种文本样式已经不可行了。

我试过了改变边际 margin: 0 至 margin: 10px auto 0; 和 .container{width:auto;}为固定宽度，方法是将其更改为.container{width:900px;}

我在这里附上了一个jsfiddle虽然我不确定它会帮助识别问题，因为它看起来居中。 http://jsfiddle.net/thetylercox/p6ENV/

目前的问题在这里。 http://www.redwirelogic.com/index.html 当我发现问题时，更新小提示以显示问题和解决方案。

Answer 1

所以这就是问题所在：

#wrapper { width:100%; overflow:hidden; margin-left:auto; margin-right:auto; }

/* Wrapper Sub Elements */
.w-main { width:1004px; margin:0 auto; overflow:hidden; }

基本上，您正在创建一个与当前窗口宽度相同的“包装器”。然后创建一个子元素，其宽度为1004px，具有自动左/右边距。

这个碰到窗口最左边的原因是因为你的#wrapper元素是左对齐文字。

你应该做的事情很简单：

#wrapper { width:100%; overflow:hidden; margin-left:auto; margin-right:auto; 
        text-align:center; } // <-- that 

/* Wrapper Sub Elements */
.w-main { width:1004px; margin:0 auto; overflow:hidden; 
         text-align:left;} // <----and this

Answer 2

你处于怪癖模式。将您的文档类型更改为

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

或

  <!DOCTYPE HTML>

并且无需对齐中心。这也将解决你在IE中的许多其他问题。

样式与chrome不同。定心

2 个答案: