CSS布局:Firefox与Chrome

时间:2016-01-09 23:37:25

标签: html css google-chrome firefox

我一直在使用Chrome,它正在寻找(布局明智),就像我想要的那样。我切换到Firefox,它完全没有权利。

What Chrome shows

请参阅此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;
}

1 个答案:

答案 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;
}