Question

我遇到的问题只会在Chrome中发挥作用。当我第一次加载网站中的任何页面时，导航栏中的H1和nav元素会变大。当用检查元件进行检查时，我可以看到我的衬垫和边缘是相同的，它们应该是什么，但是它们自身的元素更高更宽。它是一个完全响应的站点，因此当我调整浏览器大小并使用@media规则时，元素会回到它们应该的大小。但是如果我以@media大小刷新它会再次以错误的大小加载它。

如果有人知道可能导致这种情况的原因，我将非常感激有一些见解。

注意：我尝试过line-height：0;和身高：汽车;无济于事。

HTML

<header>
<a href="index.html"><h1><span id="logo">Design</span>Basics</h1></a>
<nav id="nav">
<a href="principles.html" id="navp">Principles</a>
<a href="type.html" id="navt">Typography</a>...
</nav>
</header

CSS

* { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;}

p,html,img,body,div,h1,h2,h3,h4,dd,header,main,section,nav {
  margin: 0;
  padding: 0;}

a {text-decoration: none;}

ol,ul {list-style-type: none;}

html {font-size: 62.5%; min-height: 100%;}
body {height: 100%; background-color: #eee; color: #ffe;}

body, p { font-size: 1.6rem; line-height: 150%; font-family: 'Open Sans',
  'Helvetica Neue', Helvetica, Arial, sans-serif;}

h1, h2, h3, h4, nav a { text-transform: uppercase; font-family: 'Oxygen',
  'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .3rem;}
h1 {font-weight: 700; font-size: 3rem; color: #444;}

header { background: rgba(250,250,250,0.9);
  border-bottom: 1px solid rgba(190,190,190,0.95);
  position:fixed; width: 100%;
  box-shadow: 0px -5px 20px rgba(100,100,100,0.6); }
header h1 {float:left; padding: .8rem 1% .95rem 2%;}
header hr { color: #ddd; size:1px; width:60%; display:none;}
h1 span#logo { font-family: 'Open Sans', 'Helvetica Neue', Helvetica,
  Arial, sans-serif; font-weight: 300; letter-spacing: .7rem;}
nav{ float:right; margin: .9rem 1.5rem .95rem 1rem; font-size: 1.6rem;
  letter-spacing: .2rem; transition: 1s height;}
nav a { color: #bbb; margin: 0 1.5rem; transition: .6s color;
  font-weight: 300; height: auto;}
nav:hover a {color: #ddd;}
a#navp:hover, a#navt:hover, a#navc:hover, a#navr:hover {color: #888;}

在Chrome中加载较大尺寸的元素

0 个答案: