<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
html - CSS 布局 : Firefox vs. Chrome
我一直在使用 Chrome，它看起来(布局明智)就像我想要的那样。我切换到 Firefox，它完全不正确。
请看这个codepen(这是Firefox反射(reflect)的):
http://codepen.io/elCheapo/pen/jWmdqm/
IE 也相当不同。
<html>
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<nav id="cHead">
<p>ERIC WEST</p>
<aside>Hamburger Menu?</aside>
</nav>
<section id="bgArt">
<header>
<p>ERIC</br>WEST</p>
</header>
</section>
<nav id="about">
<ul>
<li><a href="about.html">About Me</a></li>
</ul>
</nav>
<div id="blinkyArrow">
</div>
</body>
</html>
/* body (alignment etc...) */
body {
margin: 0 auto;
width: 640px;
height: 1920px;
outline: 2px solid black;
background-color: #FFEED;
}
/* cHead nav */
#cHead {
display: ;
width: 100%;
height: 5em;
background-color: #37383B;
}
#cHead p {
float: left;
padding-top: .2em;
padding-left: .5em;
font: 70px "Kinesis Pro 3" Kinesis, serif;
color: white;
text-shadow: 2px 2px 6px #000;
letter-spacing: .07em;
}
#cHead aside {
float: right;
margin: 2em
}
/* background */
#bgArt {
position: relative;
width: 100%;
height: 100%;
}
#bgArt p {
position: absolute;
top: .8em;
left: .15em;
font: 13em "Kinesis Pro 3" Kinesis, serif;
color: white;
text-shadow: 4px 4px 15px #000;
text-align: center;
line-height: .9;
}
最佳答案
您需要为您的 p 标签应用边距
#cHead p {
float: left;
padding-top: .2em;
padding-left: .5em;
font: 70px "Kinesis Pro 3" Kinesis, serif;
color: white;
text-shadow: 2px 2px 6px #000;
letter-spacing: .07em;
margin: 0;
}
关于html - CSS 布局 : Firefox vs. Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34700257/