0

我在 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>
4

3 回答 3

0

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

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

于 2013-08-22T17:17:02.013 回答
0

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

于 2013-08-22T02:12:50.200 回答
0

我看到两件事:1. Cambria 数学字体引起了问题。2. 你应该添加这个 css: html { height: 100% }

于 2013-08-22T17:04:18.273 回答