изображения не отображаются бок о бок в IE 8, но нормально в IE 11 и Firefox

Я хочу иметь два изображения бок о бок, центрированных на странице. Ширина моего тела - 800 пикселей.изображения не отображаются бок о бок в IE 8, но нормально в IE 11 и Firefox

В Firefox 31.0, Firefox 20 и IE 11 изображения отображаются таким образом, однако в IE 8 изображения располагаются вертикально, они центрируются по горизонтали с вертикальными пустыми полосами приблизительно по 190 пикселей по каждой стороне.

Я думал, что это может быть связано с объединенной шириной, когда бок о бок близко к 800px, что IE 9 может обертывать их, чтобы складывать их по вертикали. Я пробовал изображения с более узким 300px, они все еще вертикально сложены в IE.

Все предложения с удовольствием получил

<div class="gearSection" style="text-align:center;display: block;"> 
    <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;"> 
    <img src="images/Hoodie_02.jpg" border="0" width="380px" height="633px" alt="Hoodie"><br><b>Hoodies</b> 
    </div> 

    <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;"> 
    <img src="images/Hat_02.jpg" border="0" width="380px" height="633px" alt="Hat"><br><b>Beanie Hat</b> 
    </div> 
</div>

источник

2014-09-11 user1558796

Может попробовать это [ссылка] (http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working) он говорит о том, в которой говорится об '' и используя 'display: inline-block' – DavidT

You just only need to add <!DOCTYPE html> because of html5 support. Try to read this http://msdn.microsoft.com/en-us/library/ie/ms535242(v=vs.85).aspx 

<!DOCTYPE html> 
<html> 
<head> 
<body> 
<div class="gearSection" style="text-align:center;display: block;"> 
    <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin- right:auto;margin-top:2px;margin-bottom:2px;"> 
    <img src="images/Hoodie_02.jpg" border="0" width="380px" height="633px" alt="Hoodie"><br><b>Hoodies</b> 
    </div> 

    <div style="border:1px solid blue; display:inline-block; margin-left:auto; margin-right:auto;margin-top:2px;margin-bottom:2px;"> 
    <img src="images/Hat_02.jpg" border="0" width="380px" height="633px" alt="Hat"><br><b>Beanie Hat</b> 
    </div> 
</div> 
</body> 
</html>

источник

2014-09-11 11:58:55

David & Ronnie original был' 'Пробовал предлагаемый' ' Это помещает изображения рядом друг с другом, но многие ошибки с [link] (http://validator.w3.org/) валидатор формы ** конечный тег для «link» опущен, но OMITTAG NO был указан ** Tried '' эти позиционированные изображения бок о бок получили ошибки с валидатор формы ** Используйте CSS вместо ** Лучше всего использовать и изменить к CSS, где помечены? – user1558796

Я считаю, что это дубликат к этому question как я уже говорил в предыдущих комментариях. Вы можете попробовать следовать совету в этом вопросе, добавив DOCTYPE к вашему документу. Не видя полного HTML-кода, я не вижу, есть ли у вас это. Если нет, добавьте

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

источник

2014-09-11 12:01:06 DavidT

изображения не отображаются бок о бок в IE 8, но нормально в IE 11 и Firefox

ответ

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