1
Я просто тестировал некоторые основные html и css вещи, когда я пришел к проблеме, которую я не мог решить вообще.тег тела не отображается (изменяет размер) управляемый
файловсписок:
test2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="test2.css">
</head>
<body class="design1">
<div id="container">
<div id="menu" class="box">
<a href="test2.html#text1" class="box">Abschitt 1</a>
<a href="test2.html#text2" class="box">Abschitt 2</a>
<a href="test2.html#text3" class="box">Abschitt 3</a>
</div>
<div id="main" class="box">
<div id="header" class="box">
<span class="box head">Test2</span>
<span class="box head">Überschrift</span>
<span class="box head">10.09.2012</span>
</div>
<div id="text" class="box">
<p id="text1" class="box">
Lorem ipsum ...
</p>
<p id="text2" class="box">
Lorem ipsum...
</p>
<p id="text3" class="box">
Lorem ipsum...
</p>
</div>
<div id="footer" class="box">
Von ####
</div>
</div>
</div>
</body>
</html>
test2.css:
html, body, div, span {
background: none repeat scroll 0% 0% transparent;
border: 0px none;
font-size: 100%;
margin: 0px;
padding: 0px;
outline: 0px none;
vertical-align: baseline;
}
.box {
background: rgba(0, 0, 67, 0.2);
border-color: rgba(0, 0, 67, 1.0);
border-width: 1px;
border-style: solid;
}
#menu {
position: absolute;
left: 5px;
top: 5px;
width: 200px;
bottom: 5px;
}
#main {
position: absolute;
left: 210px;
top: 5px;
right: 5px;
bottom: 5px;
}
Если посмотреть на странице с Firebug будке, HTML, а элемент тела есть размер 0px раз 100% (ширина) и не видны (однако отображается часть innerHTML). Если я удалю последнюю спецификацию стиля, они вернутся к их нормальному поведению и имеют размер полной страницы (100% раз 100%).
test2.css после удаления последней спецификации:
html, body, div, span {
background: none repeat scroll 0% 0% transparent;
border: 0px none;
font-size: 100%;
margin: 0px;
padding: 0px;
outline: 0px none;
vertical-align: baseline;
}
.box {
background: rgba(0, 0, 67, 0.2);
border-color: rgba(0, 0, 67, 1.0);
border-width: 1px;
border-style: solid;
}
#menu {
position: absolute;
left: 5px;
top: 5px;
width: 200px;
bottom: 5px;
}
Кто-нибудь знает, почему это происходит и как этого избежать?
Пробовал [здесь] (http://jsfiddle.net/qGMD5/) ... это ожидаемое поведение? – Gabber
да есть. посмотрите размер элемента html/body с Firebug после и до изменения. Элемент body должен окружать все элементы не только # контейнером/ничего. – user1661264