css帮助需要修复IE中的问题

Question

好吧我讨厌IE。 但是后来我讨厌这个事实，我的CSS不是它应该是什么，所以我有这种形式，我在做和铬和ff的css呈现完美，但在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

Answer 1

确定在审查请求的图像：

1）当你不需要时，看起来你正在使用“hr”标签作为边界。相反，用一个类包装你的整个“portlet-content”和“imageUploadLogo”内容（即“uploadContainer”，它有一个“border-bottom：1px solid #CECECE; clear：both; display block; padding：0 0 20px 0 ;保证金：0 0 20px的0;宽度：100％;）

.uploadContainer { border-bottom: 1px solid #CECECE; clear: both; display block; padding: 0 0 20px 0; margin: 0 0 20px 0; width: 100%; } 

的填充和保证金是间距然后，您可以删除“小时”标签

所以，你的新容器是：

<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：bloc k;“，然后用margin +填充位置。

3）它看起来像你有一个额外的“/ div”标签为这两个容器......应该包装在一些东西，对吧？我发布的＃1应该是实体div容器供您使用。

如果您使用的是css-reset，则可能应将所有div都重置为使用“display：block”。

希望有帮助！尝试这些风格并回击它的发展方向。