IE не отображает определенные divs

Еще одна причина IE, как обычно, это единственный браузер, который не смог правильно отобразить мой сайт. У меня есть сетка divs, каждая из которых имеет фоновые изображения, поэтому они будут масштабироваться, чтобы соответствовать размеру div. Но в IE, эти дивы просто не в состоянии показать на всех, я не вижу никаких проблем в коде, которые могут быть причиной этого, любые предложения будут высоко оценены:

HTMLIE не отображает определенные divs

<div id="main-grid"> 

<div class="grid-block" style="background-image: url(IMAGE-URL-HERE)"></div> 
<div class="grid-block" style="background-image: url(IMAGE-URL-HERE)"></div> 
<div class="grid-block" style="background-image: url(IMAGE-URL-HERE)"></div> 
<div class="grid-block" style="background-image: url(IMAGE-URL-HERE)"></div> 

</div>

CSS

#main-grid { 
    width: auto; 
    position: relative; 
    margin: 0 auto; 
    margin-top: 50px; 
    text-align: center; 
} 

.grid-block { 
    display: table; 
    vertical-align: middle; 
    width: 315px; 
    height: 220px; 
    margin-left: 3px; 
    margin-right: 3px; 
    margin-bottom: 9px; 
    background: no-repeat 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Это может быть что-то совершенно очевидно, что я не хватает, но я не могу показаться, чтобы выяснить, почему эти дивы не удается показать в IE.

источник

2013-03-02 user1374796

Какая версия IE вы используете? – suspectus

@suspectus Я тестирую в IE9, я его не использую, хотя;) любые идеи относительно того, что может быть проблемой? – user1374796

И не я :) Что DOCTYPE? Вы пробовали ? – suspectus

Пустой DIV не отображаются в стандартном HTML-формате. Это может быть вашей проблемой. Я тестировал его с вашим футляром, но некоторое содержимое в тегах DIV и все было в порядке.

Моих пробы:

<!doctype html> 
<html> 
<head> 
    <style> 
    #main-grid { 
     width: auto; 
     position: relative; 
     margin: 0 auto; 
     margin-top: 50px; 
     text-align: center; 
    } 

    .grid-block { 
     display: table; 
     vertical-align: middle; 
     width: 315px; 
     height: 220px; 
     margin-left: 3px; 
     margin-right: 3px; 
     margin-bottom: 9px; 
     background: no-repeat 50% 50%; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
    </style> 
</head> 
<body> 
    <div id="main-grid"> 

    <div class="grid-block" style="background-image: url(http://www.heise.de/icons/ho/heise_online_logo_top.gif)">a</div> 
    <div class="grid-block" style="background-image: url(http://www.heise.de/icons/ho/heise_online_logo_top.gif)">b</div> 
    <div class="grid-block" style="background-image: url(http://www.heise.de/icons/ho/heise_online_logo_top.gif)">c</div> 
    <div class="grid-block" style="background-image: url(http://www.heise.de/icons/ho/heise_online_logo_top.gif)">d</div> 

    </div> 
<body> 
</html>

Всего содержание внутри DIV, пустые пролеты, например, Сделаю.

источник

2013-03-02 17:55:44 YvesR

Приветствия за это предложение, это не проблема, хотя некоторые из них имеют в них контент. поэтому я использовал фоновые изображения, так как большинство разделов имеют текст сверху, центрированный по горизонтали и вертикали, поэтому мое решение использовать таблицы. Я не уверен, что это имеет какое-то отношение к изотопному плагину, который используется для компоновки div? Или просто проблема css – user1374796

IE не отображает определенные divs

ответ

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