Являются ли повторяющиеся фон + прозрачный линейный градиент несовместимыми с плавающей точкой

Question

Это должно быть совместимо со всеми современными браузерами и IE7 и IE8.

То, что я пытаюсь сделать, это иметь повторяющееся фоновое изображение для страницы с линейным затуханием, которое делает нижнюю часть темнее. http://i.imgur.com/rrzyw.jpg

Вот мой пример кода: http://jsfiddle.net/hxk2d/2/

Как видите, в приведенном выше примере у меня есть два числа с плавающей точкой. По какой-то причине линейные градиенты тела не отображаются. Я понял, что это из-за того, что левый div плыл.

Как только я удаляю float для левого div, вы начинаете видеть градиент, но он появляется только внутри контейнера.

Очевидно, я бы предпочел, чтобы это работало независимо от того, есть ли плавающий элемент div или нет. Мои тестовые браузеры были и Chrome, и Firefox, оба из которых работали одинаково.

Что мне не хватает?

Answer 1

Пожалуйста, посмотрите на мой пример, я не уверен на 100%, но я думаю, что у родительского div двух ваших float не было вычисления высоты в результате двух плавающих div, родительский тег этого div - этотело, которое не имеет высоты, потому что ничего внутри не имеет, в качестве быстрого исправления я добавил класс clearfix к родительскому элементу плавающего элемента div

. Вот пример ссылки: http://jsfiddle.net/sHXf2/

Я изменил ваши градиенты, чтобы сделать их более заметными, надеюсь, это помогло