0

我的网页在 IE 中按预期呈现。当我进入 Firefox 时，它会在错误的位置呈现一个重要的 div，从而破坏布局。据我所知，Firefox 是错误的。如何让 Firefox 在正确的位置呈现 div？

我在三个 div 周围设置了边框，以便更容易看到它们的渲染位置。紫色的那个是在 FF 中不正确，但在 IE 中正确的那个。

编辑

JSFiddle：http: //jsfiddle.net/PYy6t/1/

JSFiddle 在两个浏览器中以相同的方式呈现代码（并且以与 FF 相同的方式），但 IE10 会按照我的需要呈现它，并且正如我的屏幕截图所示，在实际运行页面时。

我的代码：

<div style="float: left; clear: both; width: 100%;">
        <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
    </div>
    <div style="width: 100%; float: left; clear: both;">
        <hr />
        <br />
    </div>
    <asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
                border-width: 1px;">
                &nbsp
                <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
                    //details removed
                <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
                    //details removed
                &nbsp
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div class="Blank" style="width:100%">
        &nbsp
    </div>
    <hr style="width: 100%;" />

Firefox 渲染： 火狐图片

IE 渲染： IEPIC

正如你所看到的，FF 在标题文本和顶部 hr 上方开始 div，尽管两者都应该占据整个宽度。这导致第二个 hr 呈现在红色边框面板下方（以及应位于页面下方的标签），而不是紫色面板下方。我错过了什么？

4

3 回答 3

1

您的 HTML 完全无效。我不知道您是否使用了一些花哨的 CMS，但它根本不对。

  1. 你不会在#divtop 中关闭你的 div
  2. 在 html 中使用 css inline 是不好的做法，因为它应该很难改变它。
  3. 如果你想让你的 div 并排，他们必须获取 style 属性float:left
  4. 如果你想将紫色 div 包裹在其他 div 周围，它必须有overflow:auto才能与它的孩子一起调整大小
  5. InternetExplorer 永远不对，尝试使用 firefox、chrome 或 safari 进行开发。这些应该是最好的开发者浏览器。

这一切的结果将是：

<div style="float: left; clear: both; width: 100%;">
    <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
    <hr />
    <br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
            border-width: 1px; overflow:auto">
            &nbsp
            <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; float:left;">
                <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
            <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px; float:left;">
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
    &nbsp
</div>
<hr style="width: 100%;" />
于 2013-04-03T20:51:19.077 回答
1

您的问题称为 clearfix 问题。它不仅出现在 FF 中，而且出现在 webkit 浏览器（safari 和 chrome）中。我什至认为只有 IE 会按照您的预期处理它。

仅当您有一个父 div 容器，其所有子容器都漂浮在其中时，才会出现此问题。为了更好的解释，我建议使用谷歌搜索“clearfix”。

@Kev 所述的解决方案确实有效，但它需要您在 DOM 中添加一个额外的元素，该元素仅用于样式设置，这被认为是不好的做法。我建议使用某种 .clearfix 类。我通常使用来自twitter bootstrap的那个：

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

你所要做的就是把它应用到你的#divTop容器上，你应该没问题。可以在此处找到有关其工作方式和原因的说明：http: //nicolasgallagher.com/micro-clearfix-hack/

于 2013-04-03T21:18:51.563 回答
0

如果可以，请清除 div 中的 float:left。如果那不是一个选项，那么 Kev 回答了如何解决它。

float:left;//remove it or change it into
float:none;

我创造了这个小提琴。看一看。

于 2013-04-03T20:53:32.280 回答