修改

Question

这是一个IE7错误：

我有一张桌子，我推到另一张<tbody>。好吧，问题是在细胞内我有一个位置：相对; div和div里面我有几个position:absolute; div。

问题在于它们被渲染为好像父div不是位置：相对，这意味着，完全位于屏幕的左上角。为什么？！？！

在ff中，chrome工作正常，但在IE7我得到了这些烦人的东西。我已经尝试将hasLayout放在任何地方，但它只是不起作用。

这就是我所拥有的：

<table>
    <thead></thead>
    <tbody id="mtbody">
    </tbody>
</table>

这就是我收到并推送到“mtbody”（样本）：

<table id="testando">
<tr>
        <td hasLayout="true" class="uhr sl" colspan="7" style="border-bottom: dashed 1px #dddddd; background-color: #eeffee;">
            <div style="overflow: hidden;" class="holdU" hasLayout="true" betriebsId="83113" betriebsName="2nd Level">
                <div hasLayout="true" class="uhr filled0sl" style="width: 679px; left: 0px;">
                </div>


                    <div hasLayout="true" class="border" style="left: 96">
....

所以类“holdU”是位置：relative，而类“uhr”是position：absolute，它们现在位于我的左上角，有点看不见。

我该如何解决这个问题？

更新：

所以基本上这是预期的结果：http://jsfiddle.net/kgT6E/（来自DanielB）。但我不是那个。想象一下，这个绿色方块现在距离边界100px，但不是包裹红色方块，而是留在左上角，因为位置：相对于绿色方块没有任何影响。

这是我用来将内容加载到表中的代码：

$.get(savedUrl, function(res) {
        var div = $("<div>").html(res);
// this is because I get other stuff together, but what I really want is the tbody content.
        $("#mtbody").html($(div.find("tbody").get(0)).html());
});

之前，我正在把所有东西装到tbody， $（ “＃mtbody”）。负载（savedUrl）

但是IE7并没有认识到TR和TD，所以我不得不将它们包装在一张桌子里。现在我从这个位置得到了这个奇怪的定位：绝对的div。

UPDATE2：我已经尝试了所有单位（23 px ）但到目前为止没有运气。我认为这是因为我必须首先将它包装在一个div中，当我这样做时，这些位置不会更新......来自IE的真奇怪和讨厌的bug .. = /

Answer 1

这不是IE7的错误。如果你的HTML和CSS有效，那就可以了。

查看this example。

此外，您不应将<table>放入<tbody>。 <tbody>应该只有<tr>个孩子。

修改

此外，您的内联样式定义缺少度量单位。

<div hasLayout="true" class="border" style="left: 96">

应该是

<div hasLayout="true" class="border" style="left: 96px">

Answer 2

所以在挖了一下后，我发现了div.uhr风格的一个非常令人讨厌的“浮动：左”。基本上，这打破了IE7中的所有布局，使得“position：absolute”的div出现在屏幕之外。

所以人们，要小心吧！ ; d

位置：绝对;内部动态位置：相对;元件

2 个答案:

修改