0

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

我正在尝试 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>

如果您比较两个标题，您会看到左上角的图标没有到位。那么问题就出现了为什么。

因为我在我的机器上使用相同的代码，这使得图标看起来不合适，但是每当我通过 fe 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 虚拟机（宅基地）上的本地机器上运行代码。

TL;博士：

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

如何重现错误

去

  1. http://temp.leavingblue.com/5.html ,
  2. Cmd + U
  3. 将所有内容复制/粘贴到 Codepen.io
  4. 看差异

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

4

2 回答 2

2

我打开这个链接，发现图标不对齐的原因如下

//设置行高：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导致问题

这是你的错误

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

工作修复

于 2015-07-26T13:42:09.070 回答
1

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

<!doctype html>

看起来编辑器会自动包含它。

于 2015-07-26T16:17:06.973 回答