html - 风格从 chrome 到 IE 不同。定心

Question

我正在尝试将页面居中。该页面以 chrome 和 FF 居中显示。 IE 把所有东西都推到左边。我感到困惑的地方是我对多个页面使用 1 个样式表，而其中几个页面在所有浏览器中都是正确的。最好的猜测是我在页面上设置的样式生成了不正确的格式。

唯一可行的解​​决方案是如果我应用 text align: center 但这是不可行的，因为它们已经在正文中显示了其他几种文本样式。

我试过了 从更改边距 边距:0到 边距:10px auto 0; 和 .container{width:auto;} 通过将其更改为 .container{width:900px;} 来固定宽度

我在这里附加了一个 jsfiddle，但我不确定它是否有助于确定问题，因为它看起来居中。 http://jsfiddle.net/thetylercox/p6ENV/

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

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