定位跨浏览器

以下是我有：定位跨浏览器

#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：没有在第一。然后，用jquery我给他们看。我需要将它们显示在与txtName相同的位置（在其右侧）。

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

来源

2012-05-22 petko_stankoski

仅供参考'img'元素上没有'title'属性。或者像任何其他的HTML元素（div，table，whatever）一样，并不是你想要添加它的方式。你的意思是一个'alt'属性（在img上是必须的），也许你的混淆来自旧IE，如果我记得很清楚，很长一段时间显示为工具提示，如果img丢失显示标题，应该做什么。编辑什么是确定的是链接上的标题属性，当它们的文本本身不足时。 – FelipeAls

你必须非常小心的立场：相对。它真的可以让你头痛。有很多问题（特别是在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>

编辑：既然你说你不想要一个新的列，你可能周围的一切添加div标签是TD标签内，并使用浮动：左把他们都排队，或者你可以设置宽度。

#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-22 18:22:05 Seth

我不能这样做 - 我有另一列，它会因此移动。 –

如何使用另一个DIV标签将所有3个元素（输入框和2个div与图像）包装起来，并将float：left添加到每个3？上面编辑的答案包括一个例子。 – Seth

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

你不是这样使用它。

来源

2012-05-22 17:59:02

定位跨浏览器

回答

相关问题