Div並不以IE爲中心

我相信你之前已經聽說過... div在IE中沒有正確居中，即使它在Chrome和Firefox中完美工作。我已經研究過並嘗試過使用文本對齊和自動邊距的東西，但已經空了。我也嘗試用另一個div或其他東西替換標籤，但沒有任何積極的結果。任何人都可以提供的見解將不勝感激。Div並不以IE爲中心

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
.thumbnails { 
    background-color:white; 
    border: solid 1px #000099; 
    height:120px; 
    width: 640px; 
    overflow-y:scroll; 
    margin-bottom:20px; 
    position:relative; 
    padding-top: 10px; 
} 

#hugeimage { 
    background-color:white; 
    border-top: solid 1px #000099; 
    border-left: solid 1px #000099; 
    border-right: solid 1px #000099; 
    height:550px; 
    width: 640px; 
    display:table-cell; 
    vertical-align:middle; 
} 

#hugeimage a, 
#hugeimage img { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
} 

#imageinfo { 
    background-color:white; 
    border-left: solid 1px #000099; 
    border-right: solid 1px #000099; 
    width: 640px; 
} 

body { 
    background-color: #99ccff; 
    text-color: #000099; 
} 

</style> 
</head> 
<body> 
    <h3 align="center">Ship Detail</h3> 
    <center> 
     <div class="filedrop"> 
      <div id="hugeimage"> 
       <a href="#" target="_blank"> 
        <img src="images/spin/wait30.gif" /> 
       </a> 
      </div> 
      <div id="imageinfo"></div> 
      <div class="thumbnails"></div> 
     </div> 
    </center> 
</body> 
</html>

我已經從div中刪除數據。這個裸骨骼標記仍然有巨大的圖像和imageinfo div在IE中左對齊，但不是在chrome/ff中。

來源

2011-08-31 Derek

在你測試了這是什麼版本的IE？ – Matt

我在這裏創建了相應的提琴：http://jsfiddle.net/arnley/4EerD/ –

它在IE 8和9中。通過在外部div上設置固定寬度，如果用戶調整窗口大小，是不是搞砸了嗎？我想我可以爲resize事件創建一個處理程序。我無法從家中訪問代碼，但我明天會檢查它。 – Derek

刪除<center>標籤和align="center"，並在您的所有內容周圍添加包裝<div id="content">。然後添加這個CSS樣式。

#content { 
    width: 960px; 
    margin: 0 auto; 
}

例子：

<div id="content"> 
    <h3>Ship Detail</h3> 
    <div class="filedrop"> 
     <div id="hugeimage"> 
      <a href="#" target="_blank"> 
       <img src="images/spin/wait30.gif" /> 
      </a> 
     </div> 
     <div id="imageinfo"></div> 
     <div class="thumbnails"></div> 
    </div> 
</div>

來源

2011-08-31 22:33:07

我對外部div設置固定寬度很謹慎，但我明天到辦公室時會嘗試。最糟糕的情況是，我可以爲resize事件設置一個處理程序。 – Derek

沒關係。出於某種原因，我對填充和邊距感到困惑。這工作很好。謝謝！ – Derek

起初，這不適合我，因爲由於格式不正確的HTML，IE處於怪癖模式。它修復了我的HTML代碼並使IE離開了怪異模式（必須通過按F12手動執行此操作）後才起作用。 – Fluitketel

這裏是您的解決方案：

See the working demo

來源

2011-08-31 22:36:11

Div並不以IE爲中心

回答

相關問題