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

回答

相关问题