CSS布局：Firefox与Chrome

我一直在使用Chrome浏览器，它看起来（布局明智）像我想要的。我切换到Firefox，这是完全不正确的。CSS布局：Firefox与Chrome

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

来源

2016-01-09 Eric

请发表你的CSS以及。 – j08691

您需要申请保证金的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; 
}

来源

2016-01-10 00:05:38 Aladdin

谢谢阿拉丁。这改正了顶栏中的名称。关于为什么较大的中心文本显示不可靠的任何想法？此外，我的帖子是如何“脱离主题”？ – Eric

CSS布局：Firefox与Chrome

回答

相关问题