css - 这个非常简单的例子中的定位有什么问题？ (MS 浏览器 8)

Question

这是 HTML

<div class="panel" id="Panel1">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
<legend> </legend>
  <div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
</fieldset>
</div>

<div class="panel" id="Panel2">
<fieldset style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
<legend> </legend>
  <div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
</div>

这是 CSS

body {
 background-color: white;
 width: 100%;
}

.panel, Label, .fieldset {
  font: 8px Arial; 
  border: 0px;
  margin: 0px;
  padding: 0px;
}

面板一有 left=136px 和 width=136px 而面板二有 left=372px 但当我在 MS IE 中查看它们时8 它们重叠。是什么赋予了？

---

一些信息

• 显然，我是一个相对的 CSS 新手。
• 这是在 Windows 程序中设计表单然后在浏览器中查看的元素的一部分。它必须是所见即所得，这就是为什么我给出精确的坐标，而不是让浏览器对页面进行布局。
• 但也许我使用 style="position: fixed; 会更好？
• 我不确定是否需要在 div 及其内容上定位，但是，如果只有一个，那么是哪个？
• 我使示例尽可能简单，但它必须扩展以乘以嵌套的字段集
  • 我别无选择，只能使用 MS IE，尽管我可以推荐一个(最低)版本。

在此先感谢您的帮助

Answer 1

您的 HTML 不正确。 fieldset 元素上的样式定义应该位于面板 1 和面板 2 的 div 元素上。面板 2 中的 fieldset 标签也是未关闭。

试试这个 HTML:

<div class="panel" id="Panel1" style="position: absolute; top:8px; left: 136px; width: 136px; height: 48px;">
    <fieldset >
        <legend> </legend>
        <div class="label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">panel one</div>
    </fieldset>
</div>

<div class="panel" id="Panel2" style="position: absolute; top:8px; left: 272px; width: 185px; height: 64px;">
    <fieldset >
        <legend> </legend>
        <div class="Label" id="Label3" style="position: absolute; top:8px; left: 64px; width: 64px; height: 14px;">panel two</div>
    </fieldset>
</div>​