IE不呈现某些div

IE的另一个原因，像往常一样，它是唯一的浏览器无法正确显示我的网站。我有一个div的网格，每个div都有背景图片，所以它们将根据div的大小进行缩放。但在IE浏览器，这些div只是未能显示在所有的，我看不到代码中的任何问题，可能会导致此，任何建议将不胜感激：

HTMLIE不呈现某些div

<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; 
}

这可能是一些完全明显，我的思念，但我似乎无法弄清楚，为什么这些div都没有在IE中显示出来。

来源

2013-03-02 user1374796

您使用的是什么版本的IE？ – suspectus 2013-03-02 17:40:43

@suspectus我在IE9中测试，虽然我没有使用它;）关于什么问题可能是什么想法？ – user1374796 2013-03-02 17:44:16

也不是:) 什么DOCTYPE？你有没有试过<！DOCTYPE html>？ – suspectus 2013-03-02 17:47:42

空的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

干杯的建议，但这并不是问题，因为一些divs有内容。因此我使用背景图像的原因，因为大部分div都有文字顶部，水平和垂直居中，因此我决定使用表格。我不确定它是否与用于布置div的同位素插件有关？或者只是一个CSS问题 – user1374796 2013-03-02 21:08:09

IE不呈现某些div

回答

相关问题