Я подготовил образец jsfiddle, чтобы показать проблему, с которой я сейчас сталкиваюсь с моим макетом: когда я динамически вставляю содержимое в конкретный элемент (кирпич), элемент опускается вместе со своим родителем таким образом, что вне моего понимания HTML/CSS. Когда я удаляю содержимое, исходный макет восстанавливается, если я не использую Chrome... тогда он сохранит свою позицию и снова упадет при добавлении нового содержимого.
Доказательство концепции: http://jsfiddle.net/GADk9/
Флажок в примере просто переключает текст внутри кирпича, не более того. Интересно, откуда взялся этот край (это?).
Вот полный документ HTML5:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>HTML5 Falling Brick - What is this?</title>
<style>
#brick {
background-color: lightgray;
border: solid black medium;
border-radius: 1em;
color: red;
font-size: 2em;
height: 100%;
text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }
</style>
</head>
<body>
<div>
<label>Click me twice
<input onchange="document.getElementById('brick').innerHTML = this.checked ? 'FALL!!!' : ''" type='checkbox'></input>
</label>
</div>
<div id='pit'>
<div>
<div>
</div>
</div>
<div id='contrail'>
<div>
<div id='brick'></div>
</div>
</div>
</div>
</body>
</html>
Update
После того, как я снова прочитал свой вопрос, я понимаю, что может показаться неправильным впечатление, что то, что я на самом деле пытаюсь выполнить, - это исправление некоторого HTML. Чтобы особо подчеркнуть этот факт, мне здесь ничего не нужно менять. Пример с кирпичом - просто забавная демонстрация проблемы, которую я наблюдаю. Мне действительно интересно понять , что заставляет элементы изменять свою позицию при вставке содержимого в такой схеме.