문제
테스트 사이트의 디자인에 문제가 있습니다. DocType 라인이없는 IE와 함께 HTML 페이지를 열 때, 나는 그것을 좋아하는 방식으로 만 렌더링하지만 FF에서는 그렇지 않습니다 (패딩을 해석하는 방식 때문에). DocType 라인을 추가하면 페이지가 약 230px 높이로 압박됩니다. 내 의도는 높이를 최대 페이지 높이로 설정하는 것입니다. 내 파일은 다음과 같습니다.
* index.html *
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<!--[if IE]>
<style type="text/css">
body {
text-align: center;
/* Remove padding: */
padding: 0;
}
#container {
/* Mind the box model in IE.. */
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<!--[if IE]><div id="container"><![endif]-->
<div class="container">
<div class="header">
<h1>Logo</h1>
</div>
<div class="nav widget-header ">
<!-- main nav -->
<a href=""><div class="nav-button state-default " ><img src="a.jpg" alt="a" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="b.jpg" alt="b" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="c.jpg" alt="c" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="d.jpg" alt="d" /></div></a>
<a href=""><div class="nav-button state-default " ><img src="e.jpg" alt="e" /></div></a>
</div >
<div class="content">
<!--content area-->
<p>content</p>
</div>
<div class="footer">
<!-- footer -->
<p>© Copyright</p>
</div>
</div>
<!--[if IE]></div><![endif]-->
</body>
</html>
* Stylesheet.css *
/* reset */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
sbutton_cl, strike, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
.body{
line-height: 1;
text-align: center;
}
.widget-header {
background:#333333 url(images/bg-state-default.png) repeat-x scroll 50% 50%;;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
}
.state-default {
background: #CC0000 url(images/button-state-default.png) repeat-x scroll 50% 50%;
border:1px solid #333333;
color:#FFFFFF;
font-weight:bold;
font-size: 1em;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
.container {
border: 1px solid #999999;
margin: 0 auto;
width: 800px;
height: 100%;
background-color:#999999;
}
.header {
border: 1px solid #999999;
height:10%;
margin-top: 0;
padding: 10px;
}
.nav{
border: 1px solid #999999;
height:10%;
margin-top: 2%;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.nav-button {
float: left;
height: 100%;
margin-left: 3px;
overflow: hidden;
width: 150px;
}
.content{
border: 1px solid #999999;
height:60%;
margin-top: 4%;
padding: 10px;
background-color:#FFFFFF;
}
.footer{
border: 1px solid #999999;
height:10%;
margin-top: 4%;
padding: 10px;
text-align: center;
vertical-align: middle;
background-color: #FFFFFF;
}
내가 궁극적으로하려고하는 것은 고정 너비와 비율 기반 높이를 가진 디자인으로, 자식 DIV는 부모에게 비율 기반 위치가 있습니다 (이것은 다른 화면 해상도를 다루는 올바른 방법이라고 생각합니다).
누군가 나를 도와 줄 수 있다면 매우 감사 할 것입니다.
해결책 3
그의 노력에 감사하지만 Meder의 대답은 도움이되었지만 백분율 기반 디자인을 원하기 때문에 불완전했습니다. Dave의 답변은 지침과 비슷합니다. 내 문제에 대한 가장 좋은 해결책은 이것과 유사한 것입니다.http://matthewjamestaylor.com/blog/perfect-3-column.htm
이제 제 문제가 해결되었습니다. 도와 주셔서 감사합니다.
다른 팁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#wrapper { background:red; }
html,body{height:100%;}
#wrapper{min-height:100%;}
</style>
<!--[if IE 6]><style>
#wrapper { height:100%; }
</style><![endif]-->
</head>
<body>
<div id=wrapper>
<p>Hello from JS Bin</p>
<p id="hello"></p>
</div>
</body>
</html>
어떤 버전의 Explorer (6을 제외하고)는 분명하지 않지만 min-height
로 읽습니다 height
일부 버전으로 ...
그러나 이것은 HTML/CSS를 구축하는 전문적이고 가장 쉬운 방법입니다.
HTML을 확인하십시오 (유효하지 않은 HTML이 예측할 수없는 방식으로 브라우저를 혼동 할 수 있으므로 중요합니다!)
FF에서 작동하고 좋아하는 방식을 찾고 있습니다.
IE6 및 (필요한 경우) IE7 및 8에 대한 조건부 의견을 추가하십시오.
IE 6에서 패딩 등이 있다는 것을 기억하십시오 추가되지 않습니다 상자에는 너비 나 높이가 줄어 듭니다. 또한 특정 CSS 속성이없는 일부 요소 (예 : 특정 너비 또는 높이) (또는 auto
), 하지 마라 IE에서 'Haslayout'을 트리거합니다.
그것은 문제를 직접 해결하지 못했을 수도 있지만, 그것이 물건을 고정시키는 데 도움이되기를 바랍니다!