Поле div не расширяется до 100% ширины, но до ширины внутреннего дочернего элемента div - PullRequest
Новая
       18

Поле div не расширяется до 100% ширины, но до ширины внутреннего дочернего элемента div

0 голосов
/ 24 июля 2011

Кажется, у меня следующая проблема CSS только в Firefox 3.0, Firefox 3.6.В новых версиях Firefox, таких как, например, 3.6.6, мой макет работает нормально.

enter image description here

К сожалению, я не могу загрузить полный скриншот.Вот код: 

#header { width:100%; }
#header div.container { width:980px; margin:0 auto; }
#presentation { width:100%; background:red; }
#presentation div.bg { background-image:url(../images/img.png) no-repeat center top; }
#presentation div.container { width:980px; margin:0 auto; }

<div id="presentation">
<div class="bg">
<div class="container">
[content here]
</div><!-- end .container -->
</div><!-- end .bg -->
</div><!-- end #presentation -->

FF3.0 обрезает мое фоновое изображение, найденное в div.bg, на ширину div.container, хотя его родительский div, #presentation установлен на 100% и только его дочерние элементыdiv имеет ширину 980 пикселей.(нет логической причины, по которой мое фоновое изображение установлено на 980px)

Это, кажется, только в FF.Chrome, IE и т. Д. Отображает мое фоновое изображение без проблем, и оно ничего не обрезает.

Я пробовал: ширина: 100%, высота: 100%, минимальная ширина, минимальная высота дои #presentation div, #presentation div.bg, overflow: hidden, html> #presentation, очистка div после #presentation или его внутренних дочерних элементов.

В основном все, что я смог найти в Интернете до сих пор.

Мой HTML-документ в основном проверяется с помощью XHTML Strict, за исключением нескольких ошибок, которые я должен сделать (div внутри UL) - ошибки, которых нет внутри #presentation div.

1 Ответ

0 голосов
/ 24 июля 2011

Я думаю, это может быть связано с повторением изображения bg

Кстати, вот как это должно быть: 

#presentation div.bg { width: 980px; background:url("img.jpg") no-repeat top center; }

Возможно, фон недостаточно велик иоставляет некоторое пустое место?

В зависимости от того, какое у вас изображение bg, вы можете использовать repeat-x вместо no-repeat

Кстати ... Этохорошо иметь атрибуты width и height для div с фоновыми изображениями css или хотя бы ширину, если не высоту.В некоторых случаях уменьшение размера окна браузера по сравнению с оберткой может привести к обрезке фонового изображения, если ширина не задана, хотя это не должно иметь место.

...