javascript - HTML: 同等の HTML、異なるビュー

Question

現在デバッグ中の非常に奇妙なバグがあります。

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>

2 つのヘッダーを比較すると、左上のアイコンが配置されていないことがわかります。さて、その理由について疑問が生じます。

マシンで同じコードを使用しているため、アイコンがずれて表示されますが、コードをブラウザーから 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 仮想マシン (homestead) のローカルマシンでコードを実行しました。

TL;DR:

公式の getmdl.io サイト、codepen、jsfiddle では同じ HTML が問題ないように見えますが、独自の HTML ファイルで再作成すると奇妙に見えます。

エラーの再現方法

に行く

http://temp.leavingblue.com/5.html、
コマンド + U
すべてをCodepen.ioにコピー＆ペースト
違いを見る

誰でもエラーを再現できますか? また、この動作の説明はありますか?

score 2 · Accepted Answer

このリンクを開くと、アイコンが整列していない次の理由が見つかりました

// 行の高さを設定: 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>それは自己説明です

ワーキングフィックス

javascript - HTML: 同等の HTML、異なるビュー

2 に答える 2

Related

Reference