проблема с Firefox с отступом справа от контейнера - PullRequest
Новая
       12

проблема с Firefox с отступом справа от контейнера

1 голос
/ 15 апреля 2011

есть контейнер с заданным цветом фона и отступом.внутри есть изображение.в полноэкранном окне браузера это выглядит так, как должно выглядеть: http://img263.imageshack.us/img263/4792/61536769.png

, но после изменения размера окна (ширина окна меньше ширины содержимого) и появляется горизонтальная полоса прокрутки, если я прокручиваю ее вправо, я могу видеть, что фон заканчивается там, где заканчивается окно: http://img845.imageshack.us/img845/7370/11506448.png

вот код: 

<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background: pink; padding: 32px; display: block;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>

в ie8 это выглядит правильно, заполнение обрабатывается как часть содержимого,в Firefox и в опере это не так, даже если я использую «-moz-box-sizing: border-box;»(и правильный doctype и все ...), поэтому я не знаю, что мне делать.я обычно делал это с полем для изображения, но на этот раз это не может быть решением (фактическая вещь отличается от этого примера, но она показывает точную проблему).

спасибо за вашу помощь заранее:)

Ответы [ 3 ]

1 голос
/ 15 апреля 2011

Добавьте дополнительный div, который оборачивает ваш существующий div и делает float: left. 

<body style="margin: 0; padding: 0; overflow-y: scroll;">

<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>

</body>

Редактировать: Снятие дисплея: блокировка; поскольку это не имеет значения, когда у вас есть поплавок.

0 голосов
/ 15 апреля 2011

То, что происходит, заключается в том, что div не расширяется, чтобы обернуть вокруг изображения, поскольку изображение имеет фиксированную ширину, а div - нет (и поэтому по умолчанию составляет 100% родительского элемента, то есть body / HTML в 100% области просмотра). Если вы посмотрите на него с помощью Firebug, то увидите, что изображение выходит за пределы div и его отступов.

Я настроил CSS в этом jsFiddle , чтобы фон расширялся до изображения. По крайней мере, вы должны начать. По сути, я добавил overflow-y: auto; к div, что расширило фон.

0 голосов
/ 15 апреля 2011

Одна вещь, которую вы можете сделать в этом случае, это добавить определенную ширину к div: 

<body style="margin: 0; padding: 0;">
<div style="background: pink; padding: 32px; display: block; width: 640px;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</body>

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

Я собирался предложить поставить margin: 32px на изображении вместо padding: 32px на div, но когда я попробовал это, это тоже не помогло. Bizzare.

...