IE各版本布局不同

Question

我遇到了一个非常令人困惑的问题。在this site 上，我为除 IE 之外的所有浏览器正确排列了标题文本，其中文本被提升到离开标题框的位置。连IE10都有这个问题。这是我的标题的代码：

header {
  margin-bottom: 30px;
  background: #272727;
  border-radius: 5px;
  padding-bottom: 3px; }

  header .center {
    width: 94%;
    margin-left: 5.5%; }

  header h1 {
    font-family: "Bebas", "Verdana", sans-serif;
    font-size: 1320%;
    float: left;
    width: 21%;
    margin-top: -18px;
    line-height: 102%;
    letter-spacing: -15px;
    color: #e85d00; }

  header .motto {
    font: 400% "Bebas", "Verdana", sans-serif;
    float: left;
    width: 78%;
    line-height: 102%;
    color: white; }

据我所知，这里没有什么会给 IE 带来麻烦，尤其是 IE10，它应该可以与其他现代浏览器相媲美。有什么我想念的吗？另外，我有一个 Bebas 的字体声明，它工作得很好，所以这不应该是一个问题。

Answer 1

我在 IE8、IE9 中测试过，文字显示还不错。为什么在 ie.css 中将 header .center 设置为 display:none ？这就是你的意思它“离开标题”吗？

Answer 2

在引用您的定制 CSS 表之前，您是否尝试过使用 CSS 重置表？我倾向于发现 IE 浏览器的默认设置因版本而异，因此通过使用 CSS 重置，它可以让您的 CSS 在所有浏览器的相同基础上工作。

http://meyerweb.com/eric/tools/css/reset/