Переполнение: скрытый;сохранение ширины контента, но скрытие контента: Chrome

Question

Эти t h r e e Так что вопросы не совсем дали мне то, что мне было нужно, интересно, хотя материал макета BFC был. ( Один , Два , Три )

Эта скрипка показывает проблему, с которой я столкнулся, только в Chrome скрытый контент по-прежнему задает размеры по ширине для div, классифицированного как «content» со значением ширины 0px.

Этот макет является основой для меню в стиле Accordion ... которое, очевидно, не будет работать, если видны принудительные измерения содержимого: P

Почему Chrome ведет себя так, может, я что-то упустил в объяснении BFC? Решение было бы замечательно.

Answer 1

Если вы дадите .content ширину 1px, то он будет вести себя правильно. Я не могу объяснить, что происходит, но вы можете решить это, используя display: none вместо ширины.

Answer 2

Какая неприятная ошибка!

Необходимо провести дальнейшие исследования, но если вы знаете исходную ширину .content, то вы можете добавить к ней такое же отрицательное поле: http://jsfiddle.net/kizu/cpA3V/7/ - чтобы компенсировать исходную ширину. И если вам нужно оживить аккордеон, вам просто нужно оживить margin рядом с width.

Answer 3

Попробуйте с этим

.slide {
    float:left;
    width:25px; /* width added here (same width of '.handle' ) */
}

Пример: JSfiddle