奇怪的重复 IE div答案

【问题标题】：Weird duplicate IE div奇怪的重复 IE div
【发布时间】：2010-04-23 12:44:25
【问题描述】：

这是我发现的一个奇怪的错误，IE8 复制了我的 div，但只是其中的一部分。

它在 IE8 中的外观：

这就是它在 FF 中的含义：

还有 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" xml:lang="en" lang="en">

    \/\/\

 <div id="roundbigbox">
    <p id="pro">Produkter</p>

        <div id="titles">

    <div id="thinlinecopy"></div>
    <div id="varekodetext">
     <p>Varekode</p>
    </div>
    <div id="produkttext">
     <p>Produkt</p>
    </div>
    <div id="pristext">
     <p>Pris</p>
    </div>
    <div id="antalltext">
     <p>Antall</p>
    </div>
    <div id="pristotaltext">
     <p>Pris total</p>
    </div>
    <div id="sletttext">
     <p>Slett</p></div>
    <div id="thinline"></div>
    </div>


...content...


    <div class="delete">

   <a id="slett" href="/order/delete/1329?return=" title="Slett"><!--Slett--></a>
            </div>

    </div>

FF 的 CSS：

div #roundbigbox {
    background-image:url(../../upload/EW_p_og_L.png);
    background-position:top center;
    background-repeat:no-repeat;
    padding:5px;
    padding-top:10px;
    padding-bottom:0px;
    width:760px;
    height:1%;
    border-width:1px;
    border-color:#dddddd;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    z-index:1;
    position:relative;
    overflow:hidden;
    margin:0;
    margin-bottom:10px;
    }

IE 的 CSS：

div #roundbigbox {
    background-image:url(../../upload/EW_p_og_L.png);
    background-position:top center;
    background-repeat:no-repeat;
    padding:5px;
    padding-right:50px;
    padding-top:10px;
    width:760px;
    height:1%;
    border-width:1px;
    border-color:#dddddd;
    z-index:1;
    position:relative;
    overflow:hidden;
    margin:0;
    margin-bottom:10px;
    }

什么会导致这样一个奇怪的错误？它在 HTML 中没有重复。我难住了！

注意：里面还有很多其他的div，一个接一个。

感谢您的任何回复。

【问题讨论】：

因为这个div里面的内容是动态生成的，所以height:1%; overflow:hidden;让这个div随着内容而增长。
块级元素的高度已经自动增长以适应内容。
不管怎样，我去掉了 1% 的高度，它没有修复它。

标签： html css internet-explorer

【解决方案1】：

我会这么说：graphicdivine。（删除末尾多余的</div>）另外你应该检查你的CSS：

不存在负填充：P（即使在 IE 中）
你可以只用一个声明来设置你的填充：padding: top right bottom left
边框和背景也一样：

background:url(../../upload/EW_p_og_L.png) 顶部中心不重复；边框：1px 实心#ddd； /* 当你有 6 个相同字符的十六进制颜色时，只需写其中 3 个 */

【讨论】：

【解决方案2】：

最后你有一个额外的</div>。

【讨论】：

这是一个错字，但谢谢，也很抱歉。（从问题中删除）
不。我也是这么想的，但这只是结束了 div#roundbigbox 根元素。
好的。你有一个有效的 DOCTYPE 吗？
是的。我会将它添加到问题中。

【解决方案3】：

看起来你的样式表可能有错误：

IE 的 CSS：

div #roundbigbox {
    ...
    padding-bottom:-20px;
    ....
}

这可能是导致底部出现这样的原因。

【讨论】：

我删除了-20px，底部重复的 div 的高度缩小了，但仍然存在。

【解决方案4】：

尝试从<a> 中删除评论标记

听起来很奇怪，但我发现了这个问题...

【讨论】：

拿出我所有的cmets..还在那儿。
我又找到了几个cmets，但是它们在外面并且与这个特定的div无关，这会影响它吗？ UD 拿出来，没有变化。
我只有一个在锚标签内，导致我出现问题......并且在所有情况下也无法重现。
我已经删除了所有我能找到的 cmets。唯一剩下的是头部的条件cmets。它仍然存在。

【解决方案5】：

在我的 div 标记之后添加了这个，它修复了它。

<div style="display:none; width:100%; margin-bottom:10px;"> </div>

奇怪的问题。感谢你的帮助！

【讨论】：

什么是“这个”？好奇我:)
请考虑接受您自己的答案，以便人们知道您已经解决了问题
是的，接受有两天的限制，我刚进来:)