文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML:相同HTML，不同视图

问HTML:相同HTML，不同视图
EN

Stack Overflow用户

提问于 2015-07-26 13:32:21

回答 2查看 164关注 0票数 0

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

我正在尝试材料设计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>

如果比较这两个标题，就会发现左上角的图标没有到位。好吧，问题出现了，原因是。

因为我在我的机器上使用的是相同的代码，这会使图标出现异常，但是每当我复制/粘贴时，f.e就会从我的浏览器中复制/粘贴该代码。cmd+U对小提琴或密码，我把图标放在正确的位置。

见这里：

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

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

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

我在我的本地机器上运行了这些代码，它们分别在windows (wamp)和linux虚拟机( code )上运行。

TL;DR:

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

如何再现错误

去

http://temp.leavingblue.com/5.html，
Cmd +U
复制/粘贴到Codepen.io
看差异

有人能复制这个错误吗？还有人能解释一下这种行为吗？

javascript

html

css

material-design-lite

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-26 13:42:09

我打开此链接并发现以下原因:图标不是联盟的

//Set线-高度:40 in；在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> --它是自我解释的

工作固定器

票数 2

Stack Overflow用户

发布于 2015-07-26 16:17:06

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

<!doctype html>

就像看起来编辑器自动包含它一样。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31637546

复制

相似问题

问HTML:相同HTML，不同视图
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:相同HTML，不同视图EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML:相同HTML，不同视图
EN