Question

我有一个简单的HTML页面，在IE 8及更高版本中工作正常，但在IE 7中，正确的部分被一行包裹。如何在IE 7中防止这种情况？我试过清楚：两者并显示：内联解决方案，但两者都不起作用。

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

Answer 1

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

IE 7浮动：右边是浮动右侧div上方的空白行

1 个答案: