我一直在使用Chrome,它正在寻找(布局明智),就像我想要的那样。我切换到Firefox,它完全没有权利。
请参阅此codepen(这是Firefox反映的):
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;
}
答案 0 :(得分:1)
您需要在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;
}