在IE中重叠元素的垂直对齐
我使用Chrome和FF完美呈现的这种形式，但在IE中完全错误对齐。
它应该是什么样子的：
图片： 
HTML：
<!--image upload bit-->
<div class="portlet-content">
<div class="logoInfo">
<h3><strong>Large Logo</strong></h3>
<p>Width: 160px, Height: 20px | image will be resized automatically</p>
</div>
<div class="imageUploadLogo noLogo"><img id="agencyLogo" src="images/logo_silhouette.png" width="170px" height="32px"></div>
<a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a>
</div>
<div class="clearfix"></div>
<hr></hr>
<!--//image upload bit-->
<!--office upload bit-->
<div class="portlet-content">
<div class="logoInfo">
<h3><strong>Office Image</strong></h3>
<p>Width: 160px, Height: 120px | image will be resized automatically</p>
</div>
<div class="imageUploadPhoto noPhoto"><img id="agencyLogo" src="images/office_silhouette.png" width="160px" height="120px"></div>
<a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a>
<div class="extraInfo">
<h3><strong>Photo of your office</strong></h3>
<p>Image must be actual photograph of your office</p>
</div>
</div>
<div class="clearfix"></div>
<hr></hr>
<!--//office upload bit-->
<h3><strong>Office Description</strong> limited to 1000 characters ( no HTML tags )</h3>
<div class="field2"><label for="description">Office Description</label> <textarea class="resizable" id="officeDesc" rows="7" cols="50" name="description"></textarea>
</div>
<div class="clearfix"></div>
CSS：
/*agency profile stuff*/
.noLogo {
border: 2px dashed #4f8a10;
}
.noPhoto {
border: 2px dashed #4f8a10;
}
.imageUploadLogo {
background-color: #fff;
border: 2px dashed #CECECE;
float: left;
margin: 0 15px 0 0;
padding: 20px 0;
text-align: center;
width: 190px;
}
.imageUploadPhoto {
background-color: #fff;
border: 2px dashed #CECECE;
float: left;
margin: 0 15px 0 0;
padding: 20px 0;
text-align: center;
width: 190px;
}
#logo_uploada
{
position:absolute;
left:300px;
top:46px;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#logo_uploada a:visited,
#logo_uploada a:link{
color: #fff;
}
#logo_uploada:hover {
background-color: #3399ff;
cursor:pointer;
}
.logoInfo {
position:absolute;
left:300px;
top:5px;
}
.extraInfo {
position:absolute;
left:300px;
top:110px;
}
按照要求，这就是它在IE中的样子： 
好的在审查：
1）当你不需要时，看起来你正在使用“hr”标签作为边界。 相反，用一个类包装你的整个“portlet-content”和“imageUploadLogo”内容（即“uploadContainer”，它有一个“border-bottom：1px solid #CECECE; clear：both; display block; padding：0 0 20px 0 ; margin：0 0 20px 0; width：100％;）
.uploadContainer { border-bottom: 1px solid #CECECE; clear: both; display block; padding: 0 0 20px 0; margin: 0 0 20px 0; width: 100%; }
填充和边距用于间距。 您可以删除“hr”标签。
所以你的新容器将是：
<div class="uploadContainer">
<div class="portlet-content">
<div class="logoInfo">
<h3><strong>Office Image</strong></h3>
<p>Width: 160px, Height: 120px | image will be resized automatically</p>
</div>
<div class="imageUploadPhoto noPhoto"><img id="agencyLogo" src="images/office_silhouette.png" width="160px" height="120px"></div>
<a href="helper/uploadpic.php?lightbox[width]=360&lightbox[height]=140&lightbox[iframe]=1" class="lightbox"><div id="logo_uploada">Upload</div></a>
<div class="extraInfo">
<h3><strong>Photo of your office</strong></h3>
<p>Image must be actual photograph of your office</p>
</div>
</div>
2）#logo_uploada没有必要拥有“position：absolute”。 相反，请设置“display：block;” 然后利润率+填充位置。
3）它看起来像你有一个额外的“/ div”标签为这两个容器......应该被包装在一些东西，对吧？ 我发布的＃1应该是一个坚实的div容器供您使用。
如果你使用的是css-reset，你所有的div应该重置为使用“display：block”。
希望有所帮助！ 尝试这些风格并回击它的发展方向。
链接地址: http://www.djcxy.com/p/75585.html