Question

这就是我所拥有的：

#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，但不适用于其他浏览器。这是怎么处理的？

Answer 1

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

你没有这样使用它。

Answer 2

你必须非常小心位置：亲戚。它真的会给你一些麻烦。存在很多问题（特别是在IE中），位置为：relative。

我建议不要在这种情况下使用它。相反，我会在你的两个错误图像周围放置额外的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>

定位跨浏览器

2 个答案: