0
파이어 폭스에서 멋지게 보이지만, 텍스트가 Chrome의 각 div에 포함되어 있지 않은 것으로 보입니다. Chrome은 ul 및 h1 요소에 임의의 높이 값을 할당하는 것으로 보이지만 나에게있어 그 이유는 알 수 없습니다. 편집 : 좋아, 나는 분노로 미쳐 갈거야. 내 말은 탐색기에서도 작동한다는 것입니다 ............ Chrome의 ("내"라는) 문제점은 무엇입니까?!,!,!,!!?!Chrome의 div에 텍스트가 포함 된 도움이 필요합니다.
몇 가지 사항을 변경했기 때문에 스크린 샷을 삭제했습니다. 나는 방금 사이트 musingsofamachiavellian.com에 그것을 업로드했습니다. 당신은 그 영광을 그곳에서 모두 볼 수 있어야합니다. 그래서 부드러운 될
이것은 내가 처음부터 쓴 말 그대로 첫 번째 코드입니다 : {100 % 높이} : |
은 수정 HTML을 추가로 쉬웠다, 정말 감사합니다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>
크롬에는 우수한 개발자 도구가 있습니다. 라이브 페이지에서 박스 모델, 계산 된 속성 등을 체크 아웃하여 디버깅을 도울 수 있습니다. https://developers.google.com/chrome-developer-tools/ – kunalbhat
문제를 해결할 지 모르겠지만 파일 상단에''을 추가해야합니다. – bfavaretto
흠! DOCTYPE은 왼쪽 열을 끊습니다 ... HTML 5에서 가치가 떨어지는 부분을 읽은 것 같습니다. – FLAV10