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」。

希望有幫助！嘗試這些風格並回擊它的發展方向。