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

回答

相關問題