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定位问题

回答

相关问题