0

这是我所拥有的：

#nameDiv
{
    height: 0px;
    width: 20px;
    position: relative;
    top: -22px;
    left: 134px;
}

#nameDivDuplicate
{
    height: 0px;
    position: relative;
    top: -22px;
    left: 134px;
    width: 20px;
}

在我看来，我有：

<tr>
    <td><b>Name:</b> </td><td><input type="text" id="txtName" maxlength="100"/>
    <div id="nameDiv"  title="The Name is required.">
        <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
        <img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/>
    </div>
    </td>
    <td>Address: </td><td><input type="text" id="txtAddress"  maxlength="100"/> </td>
</tr>

nameDiv 和 nameDivDuplicate div 一开始有 sidplay:none。然后，我用 jquery 向他们展示。我需要将它们显示在与 txtName 相同的位置（在其右侧）。

上面的代码适用于 Google Chrome，但不适用于其他浏览器。这是如何处理的？

4

2 回答 2

1

position:relative应该与 结合使用position:absolute，其中position:relative在父元素中设置绝对定位的子元素的原点。

您没有以这种方式使用它。

于 2012-05-22T17:59:02.893 回答
0

你必须非常小心位置：相对。它真的会让你有些头疼。position:relative 存在很多问题（尤其是在 IE 中）。

我建议不要在这种情况下使用它。相反，我会在您的两个错误图像周围放置额外的 td 标签，让它们创建自己的列。这会将它们放在 txtName 输入框的右侧。

<tr>
<td><b>Name:</b> </td>
<td><input type="text" id="txtName" maxlength="100"/></td>
<td>
    <div id="nameDiv"  title="The Name is required.">
       <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
       <img title="The address already exists." src="error.jpg" id="txtNameDuplicate"/>
    </div>
</td>
<td>Address: </td><td><input type="text" id="txtAddress"  maxlength="100"/> </td>
</tr>

编辑：既然您说您不想要一个新列，您可以在该 td 标记内的所有内容周围添加一个 div 标记，并使用 float:left 将它们全部对齐，或者您可以设置宽度。

#nameDiv { width: 20px; float:left; }
#nameDivDuplicate { float:left; }
#txtName { float:left; }

我将添加的新 DIV 加粗。

<td><b>Name:</b> </td>
<td>
  **<div>**<input type="text" id="txtName" maxlength="100"/>
    <div id="nameDiv"  title="The Name is required.">
        <img title="The Name is required." src="error.jpg" id="txtNameRequired"/>
    </div>
    <div id="nameDivDuplicate"  title="The address already exists.">
        <img title="The address already exists." src="error.jpg" 
             id="txtNameDuplicate"/>
    </div>
  **</div>**
</td>
<td>Address: </td>
<td><input type="text" id="txtAddress"  maxlength="100"/> </td>
于 2012-05-22T18:22:05.063 回答