HTML：等于HTML，不同的观点

Question

我现在正在调试一个非常非常奇怪的错误。

我正在试用 Material Design Lite：http://www.getmdl.io/components/index.html#layout-section

但每当我只是 COPY/PASTE 他们官方 CodePen (http://codepen.io/anon/pen/WvaKjK) 中的 "Fixed Header" 示例时，它在我的浏览器中看起来就不一样了：

这是使用的全部 HTML：

<html>

<head>
  <!-- Material Design Lite -->
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.indigo-pink.min.css">
  <!-- Material Design icon font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Title</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content">
        <!-- Your content goes here -->
      </div>
    </main>
  </div>
</body>

</html>

如果你比较两者headers，你会发现左上角的图标不在位。那么问题就来了。

因为我在我的机器上使用了相同的代码，这使得图标看起来不合适，但是每当我copy/paste 来自我的浏览器的代码 f.e。 cmd+U 到 jsfiddle 或 codepen，我得到了正确放置的图标。

看这里：

http://codepen.io/anon/pen/LVgBzZ

这不是浏览器问题，因为同样的问题也出现在 Firefox、Chrome、Chrome Canary 和 Android Chrome 中。我这里上传了一样的HTML，显示错误：

http://temp.leavingblue.com/5.html

我运行我在 windows (wamp) 和 linux 虚拟机 (homestead) 上的本地计算机上的代码。

TL;DR:

相同的 HTML 在官方 getmdl.io 站点、codepen、jsfiddle 中看起来不错，但是当我在自己的 HTML 文件中重新创建它时看起来很奇怪。

如何重现错误

转到

http://temp.leavingblue.com/5.html,
Cmd + U
Copy/Paste全部到Codepen.io
看差异

任何人都可以重现错误吗？还有人对这种行为有解释吗？

Answer 1

我打开this link发现图标不对齐的原因如下

//设置行高：40px;在下方 css

.mdl-layout__drawer-button {
  display: block;
  position: absolute;
  height: 48px;
  width: 48px;
  border: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  font-size: 26px;
  line-height: 50px; //change here
  font-family: Helvetica,Arial,sans-serif;
  margin: 10px 12px;
  top: 0;
  left: 0;
  color: rgb(255,255,255);
  z-index: 4;
}

和

行高：1； //从下面删除这个 css

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;  //remove this from here
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

原因是在您的 fiddle 中对齐，您没有添加 css .mdl-layout__drawer-button 所以 line-height 导致了问题

这是你的错误

用这个 <!DOCTYPE html> 替换这个 <html> 它是自我解释的

working fix

Answer 2

只缺少文档顶部的一行

<!doctype html>

好像编辑器自动包含了它。

HTML：等于HTML，不同的观点

HTML: Equal HTML, different View

html

javascript

css

material-design-lite