html - 位置 : absolute; inside dynamic position: relative; element

Question

这是一个 IE7 错误:

我有一张 table ，我推到另一张 table 上 <tbody> .好的，问题是在单元格内我有一个position:relative； div 并且在这个 div 中我还有其他几个 position:absolute;分区。

问题是它们被渲染时就好像父 div 不是 position:relative，也就是说，完全位于屏幕的左上角。为什么？!？!

在 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”是position:relative的，类“uhr”是position:absolute的，它们现在在我的左上角，有点不可见。

我该如何解决这个问题？

更新:

所以基本上这是预期的结果:http://jsfiddle.net/kgT6E/ (来自 DanielB)。但我不明白。想象一下，这个绿色方 block 现在距离边界 100 像素，但它们没有包裹红色方 block ，而是停留在左上角，因为 position: relative from the green square 没有任何效果。

这是我用来将东西加载到表中的代码:

$.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").load(savedUrl)

但是 IE7 无法识别 TR 和 TD，因此我不得不将它们包装在一个表格中。现在我从 position:absolute div 得到了这个奇怪的定位。

更新 2:我已尝试放置所有单位 (23 px )，但到目前为止没有成功。我认为这是因为我必须先将它包装在一个 div 中，当我这样做时，位置不会更新。来自 IE 的非常奇怪和令人讨厌的错误。=/

Answer 1

这不是 IE7 错误。如果您的 HTML 和 CSS 有效，它就可以工作。

看看this example .

另外，你不应该把 <table>进入 <tbody> . <tbody>应该有 <tr>仅限 child 。

编辑

您的内联样式定义还缺少度量单位。

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

应该是

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