HTML：相同的 HTML，不同的视图答案

【问题标题】：HTML: Equal HTML, different ViewHTML：相同的 HTML，不同的视图
【发布时间】：2015-07-26 13:32:21
【问题描述】：

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

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

但每当我从他们的官方 CodePen (http://codepen.io/anon/pen/WvaKjK) 复制/粘贴“固定标题”示例时，它在我的浏览器中看起来会有所不同：

这是使用的整个 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>

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

因为我在我的机器上使用 same 代码，这使得图标看起来不合适，但每当我从浏览器中 复制/粘贴 代码时，f.e. cmd+U 到 jsfiddle 或者 codepen，我把 Icon 放对了。

看这里：

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
全部复制/粘贴到 Codepen.io
查看差异

谁能重现错误？还有人解释这种行为吗？

【问题讨论】：

标签： javascript html css material-design-lite

【解决方案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;
}

因为它在你的小提琴中是对齐的，你没有添加 css .mdl-layout__drawer-button 所以line-height 是导致问题的原因

这是你的错误

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

working fix

【讨论】：

对不起，我还是不明白。为什么它在 codepen.io 或上面的代码 sn-p 中有效，但在我发布的链接上无效？据我了解，我两次都引用了 cdn，并且在我发布的所有链接中我根本不使用任何 CSS 文件。（就在 jsfiddle 中，因为 jsfiddle 无法识别图标的链接。
简单的答案，一个css被另一个css覆盖，在这种情况下，使用您自己的自定义css的最佳方法是!important或尝试更改包含的css文件的位置，记住如果你有3 个 css 文件，如 1、2 和 3，第 3 个文件将覆盖 1 和 2，因为它最后进来，浏览器会最后读取它，并且比 1 和 2 更喜欢它
这归结为 CSS 特异性。字体需要在 MDL CSS 之前包含（也因为它可能会在小众情况下以其他方式引起问题。）由于字体 CSS 出现较晚，它比 MDL CSS 具有更高的优先级，因此图标 CSS 覆盖了 MDL 设置的行高.
更改字体的优先级（包括在 MDL CSS 之前）并没有什么不同。删除它，当然可以。然而这个问题还没有回答，为什么相同的代码会产生不同的结果。
最后检查我的答案

【解决方案2】：

所有缺少的只是文档顶部的一行

<!doctype html>

似乎编辑器自动包含它。

【讨论】：

真的，在我更新答案 2 分钟后，您将发布您的答案并告诉其他人这是问题所在
我没有看到你的更新。我下载了他们的一个工作模板的完整源代码，并将其逐个剥离，直到唯一的区别是 Doctype。尽管如此，我非常感谢您的贡献，并接受您的答案为正确答案。谢谢老兄。
是的，我花了 30 分钟来解决这个问题，在我的服务器上复制所有内容，比较并弄清楚，所以当我看到你在我更新答案后发布答案时让我有点生气，我的反对和不客气