DIV не соответствует ширине измененного размера.

По какой-то причине FireFox по-видимому не изменяет размер ширины плавающего div при масштабировании изображения по высоте, а свойство width устанавливается на auto. Он работает так, как предполагалось, в Chrome.DIV не соответствует ширине измененного размера.

Rendering

JS-скрипку обыкновение сделать его совершенно правильно, так вот код:

<STYLE> 
div { 
    border: solid 1px green; 
} 
.container { 
    height:400px; 
    width:300px; 
} 

.holder{ 
    border: solid 1px blue; 
    float:right; 
} 
.resized { 
    height:90%; 
} 
</STYLE> 
<div class="container"> 
    <div class="holder"> 
     <img class="resized" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAACPAgMAAADM7sDzAAAACVBMVEXMzMz+/v7///9Fv2/IAAAA7ElEQVRIS+3OMWrDQBAF0L9LNERbJRCDpNoGSaeY2tU2blK5SJVT6Ah7hCGkcOaUKRzv7gRsSBNM4t89+Mx84C9mgmAXazp9L2Qh7jPHRVpQYZQOnjMfLvLJ8t6ysZed/evMqtGZzbdcYVQmDGcZMPFzzZG3htHyMRiuLHvLO0ucp8ol/lYC0Oww63LkwHjVlLlilxDHU3mzeAYy94lQMe0JyKfcsibMkslrwiynstcDAZmkH54LGzQuFbagelUHz/XmW64vPWirb6qHIwltqOi5CwDkq+zSS03EaLjhoFI4WAaY8k/57VTNf5VPpH1Mhhj2avwAAAAASUVORK5CYII="> 
    </div> 
     <div> 
      LOL, div.. Div Div Div Div Div Div Div Div Div Div Div 
     </div> 
</div>

источник

2015-05-16 Zinob

я просто проверял на сафари и хром, и это выглядит идентично –

лично, в этой ситуации, мне нравится поместите мой контент в два контейнера следующим образом: http://jsfiddle.net/fake060a/1/, тогда вы можете просто позволить контейнерам управлять тем, как отображаются ваши объекты. –

Это, по-видимому из-за странность в режиме он причуды. Решение состояло в том, чтобы просто принудительно ввести строго-HTML5, добавив <!DOCTYPE html> в начало документа, установив высоту изображения на 100% и высоту «держателя» до 90% (чтобы контейнер изображения получил нужный размер и изображение получило 100% от этой высоты). Благодаря nice folks at Mozilla за указание на это

в результате лобового часть документа:

<!DOCTYPE html> 
<STYLE> 
div { 
    border: solid 1px green; 
} 
.container { 
    height:400px; 
    width:300px; 
} 

.holder{ 
    border: solid 1px blue; 
    float:right; 
    height: 90%; 
} 
.resized { 
    height:100%; 
}

источник

2015-06-01 09:28:47 Zinob

DIV не соответствует ширине измененного размера.

ответ

Смежные вопросы