У меня очень странная ошибка. Я отлаживаю прямо сейчас.HTML: Равный HTML, другой Вид
Я пытаюсь из материала 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>Если вы сравниваете два заголовка, вы видите, что значок в левом верхнем углу не находится на месте. Ну, квест возникает из-за того, почему.
Потому что я использую же код на моей машине, что делает значок появляется из места, но каждый раз, когда я копировать/вставить код из браузера по 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
Я побежал код на моей локальной машине на окнах (WAMP) и на Linux виртуальной машине (приусадебных).
TL; DR:
же HTML выглядит хорошо в Официальном сайте getmdl.io, codepen, jsfiddle, но выглядит странно, когда я восстановить его на моем собственном HTML-файл.
Как воспроизвести ошибку
Перейти к
- http://temp.leavingblue.com/5.html,
- Cmd + U
- Копировать/Вставить все Codepen.io
- Посмотрите на различия
Может ли кто-нибудь воспроизвести ошибку? У кого-нибудь есть объяснение этого поведения?
Извините, я до сих пор не понимаю. Почему он работает в codepen.io или в фрагменте кода выше, но не по ссылке, которую я опубликовал? По моему мнению, я упоминаю оба раза cdn, и я вообще не использую CSS-файл во всех ссылках, которые я опубликовал. (Просто в jsfiddle, потому что jsfiddle имеет проблемы с распознаванием ссылки на значки. – LoveAndHappiness
простой ответ, один css написан поверх другого, в этом случае лучший способ использовать свой собственный CSS-файл с '! Important' или попытаться изменить положение включенных css-файлов, помните, если у вас есть 3 файла css, например 1, 2 и 3, третий файл перезапишет 1 и 2, потому что он будет последним, и браузер прочитает его последним и предпочтет его более 1 и 2 – Shehary
Это сводится к специфичности CSS. Шрифт должен быть включен до CSS MDL (также, поскольку это может вызвать проблемы другими способами для случаев ниши.) Поскольку шрифт CSS приходит позже, он получает более высокий приоритет, чем MDL CSS, поэтому значки CSS являются переопределяя высоту линии, установленную MDL. – Garbee