Вход

Просмотр полной версии : Отключать видимость при нулевой высоте, или не отключать?


revvo
06.08.2011, 11:42
Делаю анимацию, прячу и показываю элемент интерфейса. Когда я ему задаю высоту 0, он ведь все равно не видим. Стоит ли отключать ему видимость - display: none; ? Я не вижу смысла. Но может есть подводные камни, и подводные грабли, о к-рых я не знаю? :)

B@rmaley.e><e
06.08.2011, 11:45
Прятать через height: 0 не очень удачная идея. IE6, например, трактует height как min-height, да и при нулевой высоте, емнип, элемент может быть виден из-за паддингов.
Лучше использовать display:none для скрытия

revvo
06.08.2011, 13:22
Дело даже не в том, что я его так прячу, просто я все равно анимацию делаю, так или иначе я его свожу к нулю. Вот и думаю, а нужно ли дополнительно еще прятать.

IE6 меня не интересует, можно забить.

Паддингов нет, это никак не мешает.

Еще есть аргументы? :)

monolithed
06.08.2011, 13:58
После того как значением становится нуль, нужно делать как сказал B@rmaley.e><e

revvo
08.08.2011, 20:59
После того как значением становится нуль, нужно делать как сказал B@rmaley.e><e
Что значит нужно? Аргументировать можете? Я не докапываюсь, мне интересно просто понять.

devote
09.08.2011, 02:28
Что значит нужно? Аргументировать можете? Я не докапываюсь, мне интересно просто понять.
Ну а для чего по твоему в стандарт CSS добавили свойство display? Если бы блок можно было прятать просто уменьшив его значение высоты, сомневаюсь что ввели бы такое свойство как display. Установив height в нулевое значение, не всегда можно быть уверенным в том что блок скроется полностью. Нужно учитывать такие свойства как line-height, font-size, padding, margin, border и т.д. тоесть установив значение height в нулевое значение, нужно позаботиться и о свойствах что я описал выше что бы элемент 100% был скрыт, для этого и ввели свойство display с параметром none что бы не мучатся с тем что я описал выше. Так же не забываем о наследуемых/глобальных свойствах.

B@rmaley.e><e
09.08.2011, 13:43
height: 0 не скрывает элемент<style type="text/css">
#parent {backgroud: red; height: 0; width: 100px}
#child {background: blue; height: 100px; width:100px;}
</style>

<div id="parent">
content
<div id="child">
child content
</div>
</div>

walik
09.08.2011, 16:07
B@rmaley.e><e,
Если добавить overflow: hidden; то элемент будет скрыт)))

Но вот от бордера overflow не спасет, так что однозначно ставить display: none надо

B@rmaley.e><e
09.08.2011, 17:39
Если добавить overflow: hidden; то элемент будет скрытЭто. в свою очередь, повлечёт:
1. Создание контекста форматирования (Не факт, что плохо, но это какой-то side-effect)
2. Невозможность вынести дочерний блок за пределы родительского позиционированием.

Ну и я уже не говорю о двух свойствах против одного. Которые, опять же, не предназначены для скрытия элемента.