IE7定位問題

我在IE7中有一個奇怪的佈局問題。基本上會發生的是，它不是將內容與左上角對齊，而是與其中間的某個位置對齊。IE7定位問題

看起來好像一切正常顯示，但main-bank-container是不合適的一個元素。我不想絕對定位，因爲這意味着我必須用jQuery來保持包含div的高度，而不是隱含的。

我已經設置了一個jsFiddle here來提供幫助。

下面是代碼：

HTML

<div style="padding: 4px;" class="nopad" id="maincontent"> 
    <div id="summary-page-container"> 
     <div id="main-bank-container"> 
      <div id="bank1" class="bank-container"> 
       <div class="basicview"> 
       </div> 
      </div> 
      <div id="bank2" class="bank-container"> 
       <div class="basicview"> 
       </div> 
      </div> 
      <div id="bank3" class="bank-container"> 
       <div class="basicview"> 
       </div> 
      </div> 
      <div id="bank4" class="bank-container"> 
       <div class="basicview"> 
       </div> 
      </div> 
     </div> 
     <div style="clear: both;"> 
     </div> 
    </div> 
</div>

CSS

#maincontent { 
    overflow: hidden; 
    text-align: center; 
} 
#summary-page-container { 
    overflow: hidden; 
    position: relative; 
    width: 1400px; 
} 
#main-bank-container { 
    width: 690px; 
} 
.bank-container, .bank-container-small { 
    border: 1px solid #CFCFCF; 
    border-radius: 5px 5px 5px 5px; 
    color: #555555; 
    height: 90px; 
    margin: 10px; 
    position: relative; 
    text-align: left; 
    text-shadow: 0 1px 1px #FFFFFF; 
    width: 670px; 
} 
.basicview { 
    background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ebebeb)); 
    background:-moz-linear-gradient(top,#ffffff,#ebebeb); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb')"; /* IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ebebeb'); /* IE6 & IE7 */ 

    border-radius: 5px 5px 5px 5px; 
    height: 90px; 
    width: 100%; 
}

哦，如果它的事項這裏是mydoctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

來源

2012-07-23 Chris

從#maincontent

My Fiddle

來源

2012-07-23 09:23:17

你，先生，是個美男子！ – Chris 2012-07-23 09:32:35

@Chris哈哈thnx – 2012-07-23 09:32:57

#main-bank-container { 
    width: 690px; 
    float:left; 
}

來源

2012-07-23 09:22:43

兩個可能的問題，我可以看到刪除text-align: center;是，＃主銀行容器具有690px寬度，而彙總頁面容器包含1400px的寬度。

如果你刪除#maincontent div上的文本對齊中心聲明，它也將整理定位，並在IE9標準上看IE9中的小提琴。

來源

2012-07-23 09:32:25 munnster79

IE7定位問題

回答

相關問題