Оптимальное CSS-решение
Используйте следующий код для добавления бездетного первого ребенка к непреднамеренно движущемуся div:
.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
Преимущество этого метода заключается в том, что вам не нужно изменять CSS любого существующего элемента, и, следовательно, он оказывает минимальное влияние на дизайн. Кроме того, добавляемый элемент является псевдоэлементом, которого нет в DOM-дереве.
Поддержка псевдоэлементов широко распространена: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ и IE 8+. Это будет работать в любом современном браузере (будьте осторожны с более новым ::before
, который не поддерживается в IE8).
контекст
Если первый дочерний элемент элемента имеет margin-top
, родительский объект будет корректировать свою позицию как способ свертывания избыточных полей. Почему? Это просто так.
Учитывая следующую проблему:
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>
<div class="parent"><!--This div moves 40px too-->
<div class="child">Hello world!</div>
</div>
Вы можете исправить это, добавив дочерний элемент с таким содержимым, как простое пространство. Но мы все ненавидим добавлять пробелы для решения проблемы, связанной только с дизайном. Поэтому используйте white-space
свойство для фальсификации контента.
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="fix"></div>
<div class="child">Hello world!</div>
</div>
Где position: relative;
обеспечивает правильное расположение исправления. И white-space: pre;
избавляет вас от необходимости добавлять какой-либо контент - например, пробел - в исправление. И height: 0px;width: 0px;overflow: hidden;
гарантирует, что вы никогда не увидите исправление.
Возможно, вам придется добавить line-height: 0px;
или max-height: 0px;
убедиться, что высота на самом деле равна нулю в древних браузерах IE (я не уверен). И по желанию вы можете добавить <!--dummy-->
к нему в старых браузерах IE, если он не работает.
Короче говоря, вы можете сделать все это только с помощью CSS (что устраняет необходимость добавления фактического дочернего элемента в HTML-дерево DOM):
<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>
<div class="parent"><!--This div won't move anymore-->
<div class="child">Hello world!</div>
</div>