我现在正在调试一个非常非常奇怪的错误。
我正在试用 Material Design Lite:http://www.getmdl.io/components/index.html#layout-section
但是每当我只是从他们的官方 CodePen (http://codepen.io/anon/pen/WvaKjK) 中复制/粘贴“固定 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>如果比较两个标题，您会发现左上角的图标不在位。好吧，问题出现了。
因为我在我的机器上使用了相同代码，这使得图标看起来不合适，但每当我通过 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) 上运行了代码。
长话短说:
相同的 HTML 在官方 getmdl.io 站点、codepen、jsfiddle 中看起来不错，但在我自己的 HTML 文件中重新创建它时看起来很奇怪。
如何重现错误
转到
- > http://temp.leavingblue.com/5.html ,
- 命令 + U
- 将所有内容复制/粘贴到 Codepen.io
- 观察差异
任何人都可以重现错误吗？还有人对此行为有解释吗？
最佳答案
我打开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 中的 allign，你没有添加 css .mdl-layout__drawer-button所以line-height导致问题
这是你的错误
替换这个 <html>有了这个<!DOCTYPE html>这是 self 解释
关于javascript - HTML:相同的 HTML，不同的 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31637546/