Internet Explorer將div寬度視爲100％？

圖像（徽標）的寬度似乎是100％，因爲它會將下方的div（header_box）向下推。所有其他瀏覽器的header_boxes顯示在徽標的右側，但Internet Explorer（當然）正在做一些不同的事情。Internet Explorer將div寬度視爲100％？

HTML

<body> 
    <div id="header"> 
     <img id="logo" src="images/logo.png" alt="Logo" /> 
     <div class="header_box"> 
      <img id="profile" src="images/questionmark.png" alt="Profile Image" /> 
      <span id="profile_name">Sample</span><br /> 
      <ul id="profile_settings"> 
       <li>Profile</li> 
       <li>Settings</li> 
      </ul> 
     </div> 
     <div class="header_box"> 
      <img id="notifications" src="images/notifications.png" alt="Notifications" /> 
     </div> 
     <div class="clear"></div> 
    </div>

CSS

#header { 
background:#3A3A3A; 
color:white; 
border-bottom:5px #771439 solid; 
-moz-box-shadow: 0 1px 5px 3px #888; 
-webkit-box-shadow: 0 1px 5px 3px#888; 
box-shadow: 0 1px 5px 3px #888; 
} 

#logo { 
height:82px; 
display:inline; 
} 

.header_box { 
display:inline-block; 
float:right; 
background:#262626; 
padding:5px; 
margin:16px 15px 12px 0; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 1px #474747 solid; 
text-align:left; 
font-size:11px; 
min-height:40px; 
}

讓我知道如果你需要任何更多的信息。我不確定如何描述這個問題。

來源

2012-02-12 Sam

這是舊版IE中的常見問題。您應該能夠將所有內容都包裝在一個高度正確的div上，並在您的徽標css中包含float:left。 Here是一個jsfiddle來試用它。

HTML

<div style="height"82px;"> 
    <img id="logo" src="images/logo.png" alt="Logo" /> 
    <div class="header_box"> 
     <img id="profile" src="images/questionmark.png" alt="Profile Image" /> 
     <span id="profile_name">Sample</span><br /> 
     <ul id="profile_settings"> 
      <li>Profile</li> 
      <li>Settings</li> 
     </ul> 
    </div> 
    <div class="header_box"> 
     <img id="notifications" src="images/notifications.png" alt="Notifications" /> 
    </div> 
</div>

CSS

#logo { 
float:left; 
height:82px; 
display:inline; 
}

來源

2012-02-12 04:09:50

作品，感謝.. – Sam 2012-02-12 04:15:45

Internet Explorer將div寬度視爲100％？

回答

相關問題