IE 7浮動：右邊是在浮動右上方創建一個空行div

我有一個簡單的HTML頁面，在IE 8和更高版本中工作正常，但在IE 7中，正確的部分被換行。我怎樣才能在IE 7中防止這種情況？我試圖清楚：兩者都顯示：內聯解決方案，但都沒有工作。IE 7浮動：右邊是在浮動右上方創建一個空行div

IE 7 is Causing Float:Right to Wrap

我的HTML代碼是：

<!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"> 
<head id="Head1"> 
<meta http-equiv='X-UA-Compatible' content='IE=7,chrome=1' /> 
<title>Sample Page 
</title> 
<style type="text/css"> 
    .error 
    { 
     color: Red; 
     font-family: Arial; 
     font-size: small; 
    } 

    .feedback 
    { 
     color: Red; 
     font-weight: bold; 
     font-size: large; 
    } 

    .inprocess 
    { 
     background-color: lightyellow; 
    } 

    .inerror 
    { 
     background-color: #FFE2E6; 
    } 

    .success 
    { 
     background-color: #EFFFD5; 
    } 
</style> 
</head> 
<body> 
<div id="headerDiv" style="width: 100%; min-width: 900px; margin-bottom: 15px;"> 

    <span style="font-size: small; font-weight: bold; color: gray">Welcome back, </span> 
    <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif"> 
     XYZ 

    </label> 
    ,&nbsp; 
     <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif"> 
      ABCD 
     </label> 
    &nbsp;&nbsp; 
     <a href="javascript:closeWP();" id="logout" 
      title="Log Out" style="text-align: right">Log Out</a> 
    &nbsp;&nbsp; <span id="adminHintLabel" > 
     <div style='margin: 5px 0px 14px 0px; float: right; font-family: arial; font-size: small;'> 
      (For record with error, double click on the row to view error message.) 
       <div style='height: 14px; width: 14px; float: left; background-color: lightyellow; margin-right: 4px; border: 1px solid black;'></div> 
      <div style='float: left; padding-right: 14px;'>Being Processed</div> 
      <div style='height: 14px; width: 14px; float: left; background-color: #FFE2E6; margin-right: 4px; border: 1px solid black;'></div> 
      <div style='float: left; padding-right: 14px;'>Record has Error/s</div> 
      <div style='height: 14px; width: 14px; float: left; background-color: #EFFFD5; margin-right: 4px; border: 1px solid black;'></div> 
      <div style='float: left; padding-right: 14px;'>Promoted</div> 
     </div> 
    </span> 
</div> 
</body> 
</html>

期待的顯示需要是這樣的： Expected Display of this Page

來源

2013-12-10 Sunil

IE7很難在最好的時候，一起工作，但當你處理內聯CSS（很難閱讀）和<div>內部<span>即使它是HTML5。有時您使用單引號'，有時會使用雙引號"。只需使用雙。 <div class="classname">。

反正，我覺得有你需要做的幾件事情：

首先，你必須<span id="adminHintLabel" >一個包裝<div>你想浮動權。但跨度本身並沒有正確地浮動。取下跨度容器，它是多餘的。

其次，您需要將浮在左邊的東西，左，這意味着將容器放置在他們身邊，像這樣：

<div style="float: left;"><!-- New Container --> 
    <span style="font-size: small; font-weight: bold; color: gray">Welcome back, </span> 
    <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif">XYZ</label> 
    ,&nbsp; 
    <label class="strong" for="logout" style="color: Navy; font-size: small; font-weight: bold; font-family: Sans-Serif">ABCD</label> 
    &nbsp;&nbsp; 
    <a href="javascript:closeWP();" id="logout" title="Log Out" style="text-align: right">Log Out</a> 
    &nbsp;&nbsp; 
</div>

最後，在右邊浮動內容已添加文本首先，然後是浮動元素，但您希望最後顯示文本。一個容器添加到文本，最後將其放置在順序和浮點它留給其他人一樣：

<div style="margin: 5px 0px 14px 0px; float: right; font-family: arial; font-size: small;"> 
    <div style="height: 14px; width: 14px; float: left; background-color: lightyellow; margin-right: 4px; border: 1px solid black;"></div> 
    <div style="float: left; padding-right: 14px;">Being Processed</div> 
    <div style="height: 14px; width: 14px; float: left; background-color: #FFE2E6; margin-right: 4px; border: 1px solid black;"></div> 
    <div style="float: left; padding-right: 14px;">Record has Error/s</div> 
    <div style="height: 14px; width: 14px; float: left; background-color: #EFFFD5; margin-right: 4px; border: 1px solid black;"></div> 
    <div style="float: left; padding-right: 14px;">Promoted</div> 
    <!-- Add container to text and place at bottom --> 
    <div style="float: left;">(For record with error, double click on the row to view error message.)</div> 
</div>

Here it is all together, and tested on IE7 native。

來源

2013-12-10 03:19:19 davidpauljunior

謝謝。有用。你的解釋非常好，很有幫助。 – Sunil

IE 7浮動：右邊是在浮動右上方創建一個空行div

回答

相關問題