Question

我在firefox中看起来很精彩，但由于某种原因，所有文本似乎都不会保留在Chrome中各自的div中。 Chrome似乎正在为ul和h1元素分配随机高度值，但对于我的生活，我似乎无法弄清楚原因。编辑：好的，愤怒我疯了。我的意思是它甚至适用于探险家............什么是Chrome（读“我的”）问题！？！？！？！？！？！

我删除了屏幕截图，因为我做了一些更改。我只是将它上传到网站musingsofamachiavellian.com你应该能够在那里看到它的所有荣耀的问题。

非常感谢，修复就像添加html {height：100％;}

一样简单

这实际上是我从头开始编写的第一个代码，所以要温柔：|

CSS：

body {
    background-color: #a5e2a8; /*A light green*/
    min-width: 960px; 
}
#Foundation {
width:960px;
height:100%;
background-color: #3b3b3b; /*Milk White*/
background-color: rgba(59,59,59,0.9);
/* background-color: #212121; /*A light black*/
}

#Header {
    height:80px;
    width:940px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
}


#TitleText{
    height:80px;
    width:940px;
    font-family: Cambria math;
    font-size: 48px;
    padding: 16px;
    color: #F70D1A;
    vertical-align: top;
}

#ButtonBar{
    height:32px;
    width:940px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
}

#ButtonBarUL{
    height:32px;
    width:940px;
    margin:0px;
    padding: 6px;
}


.Button {
    text-align: center;
    font-family: Cambria math;
    font-size: 16px;
    padding-top: 0px;
    padding-left: 0px;
    color: #F70D1A;
    display: inline-block;
    list-style-type: none;
    vertical-align: top;
}

#SidebarContainer {
    height:100%;
    width:160px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
}
.SideBarContent {
    width:140px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    text-align: center;
    font-family: Cambria math;
    font-size: 12px;
    color: #212121;
}

#MainContainer {

    height:100%;
    width:770px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:0px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
}

.ArticleContainer {

    height:100%;
    width:750px;
    margin: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
}

.ArticleHead {

    height:100%;
    width:750px;
    margin: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    border-bottom:1px solid;
    font-family: Cambria math;
    font-size: 14px;
    color: #F60D1B;
}

.ArticleContent {

    height:100%;
    width:750px;
    margin: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    font-family: Cambria math;
    font-size: 12px;
    color: #212121;
}

#Footer {
    height:32px;
    width:940px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    background-color: #FEFCFF; /*Milk White*/
    background-color: rgba(254,252,255,0.9);
    float:left;
    font-family: Cambria math;
    font-size: 12px;
    color: #212121;
    clear: both;
    list-style-type: none;
    text-align: center;
}

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

站点：

<!DOCTYPE html>
<head>
<link rel='stylesheet' type='text/css' href='core.css' />
<script type='text/javascript' src='script.js'></script>
<title>Musings</title>
</head>
<body>
<div id='Foundation'>
    <header id='Header'>
        <h1 id='TitleText'>Musings of a Machiavellian</h1>
    </header>
    <div id='ButtonBar'>
        <ul id='ButtonBarUL'>
            <li class='Button'>About |</li>
            <li class='Button'>Past |</li>
            <li class='Button'>Future |</li>
            <li class='Button'>FAQ |</li>
        </ul>
    </div>
    <section id='SidebarContainer'>
        <div class='SideBarContent'>
        <p>Chronicles</p>
        </div>
    </section>
    <section id='MainContainer'>
        <div class='ArticleContainer'>
            <div class='ArticleHead'>
                <h1>Hey! Thanks for stopping by. We're currently under construction...</h1>
            </div>
            <article class='ArticleContent'>
                <p>This will be blog 2.0 - A webspace for own personal experimentation, and to chronicle (err.... blog) some musings.</p>
                <p>They'll range in topic from politics, to science, to strategy, to economics. Stay tuned, or simply send me a message.</p>
                <p>I'm by no means a web-development expert. If you see something that should be improved, I more than welcome your suggestions. Feel free to shoot me an e-mail!</p>
            </article>
        </div>
                <div class='ArticleContainer'>
            <div class='ArticleHead'>
                <h1>I hate chrome...</h1>
            </div>
            <article class='ArticleContent'>
                <p>If you're viewing this page in Chrome, chances are it looks jumbled. The reason, no clue... but the search for an answer is quickly turning intot he bane of of my existance.</p>
                <p>Frustration level.... over 9000! I mean, it even works in internet exploder...</p>
            </article>
        </div>
    </section>
    <footer id='Footer'>
        <ul id='ContactInfo'>
            <li>info'at'Musings...</li>
        </ul>   
    </footer>
</div>
</body>
</html>

Answer 1

我相信这是因为div基金会需要匹配其CSS。基础和基础。一个是大写的，一个不是。

Answer 2

我看到两件事： 1. Cambria数学字体导致问题。你应该添加这个css：html {height：100％}

Answer 3

我做了很多调整。看看http://codepen.io/anon/pen/Ezham

值得注意的是我使用％而不是像素并添加了正确的定位。

需要帮助在Chrome中的div中包含文字

3 个答案: