IE 8 и JQuery проблема

Question

У меня есть такой div:

<div class="box">
    <div id="myid" style="display:hidden;"> <p>some stuff here</p></div>
</div>

когда я выполняю $("myid").slideToggle("slow"); в HTML выше (div "myid" скрыт), если содержимое имеет большую высоту над блоком, мое содержимое переполняется снизу класса "box", странно, что это не так случается с другими браузерами, но IE8

Как я могу исправить эту проблему, чтобы, когда «myid» начал отображать содержимое, высота .box изменялась в соответствии с внутренним div.

CSS для моей коробки:

.box {
    background:#fff;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    border-radius: 10px;
    border:1px solid #fff;
    margin-bottom:10px;
    padding:0;
    }

Answer 1

display:hidden; не то, что вы хотите. Попробуйте вместо этого установить display:none;.

Основная проблема в том, что вы хотите, чтобы коробка имела минимальную высоту, верно? Но это должно стать больше, чтобы соответствовать внутреннему div? Вы должны избегать установки явной высоты на поле. Вы можете использовать min-height, но это не поддерживается в IE. Я бы использовал брата к #myid, который имеет явную высоту, чтобы держать коробку на минимальной высоте. Например, он может быть шириной 1 пиксель, но высотой 50 пикселей (минимальная высота 50 пикселей). Вам нужно будет пропустить ваши внутренние элементы.

Вот демонстрация, которая делает это: http://www.jsfiddle.net/ZKkB3/

Основным ограничением является то, что у вас есть небольшое расстояние слева. Я мог бы представить, что это можно исправить с помощью отрицательных полей.