位置：在IE和Chrome的TD中绝对不同

Question

基本上，在一个TD中，我有一些写作“查看订单”的跨度。在那之前，我有一个跨度的图像，在那之后我有一个跨度的另一个图像。因此，3个跨连续一字排开，一个TD里面：

<span id=\"test_float\"><img src=\"green_check.png\">&nbsp=&nbspCompleted</span><span id=\"test_float_3\" class=\"font24\">Viewing ".$user_first_name."'s Orders</span><span id=\"test_float_2\"><img src=\"green_edit_pencil_small.jpg\">&nbsp=&nbspEdit</span> 

CSS：

#test_float { 
position: absolute; 
margin-left: 50px; 
margin-top: 15px; 
} 
#test_float_2 { 
position: absolute; 
margin-left: 90px; 
margin-top: 15px; 
} 
#test_float_3 { 
position: relative; 
} 

在IE它看起来很棒。在铬它不起作用。我把它缩小到了POSITION：ABSOLUTE。在IE中，它将第一个跨度“test_float”放在TD的左上角。在Chrome中，它将它放在td的中间跨度“test_float_3”的左上角（因此它位于单词“viewing”的顶部）

在chrome中，如果删除“positon：absolute”它在IE中使用“position：absolute”代码执行，但是它将中间跨度稍微推向一边，使其看起来像垃圾。

现在，我知道我可以解决这个问题，使TD成为3 TD并且每个跨度都在自己的TD中，但是我希望IE和Chrome中的这个“位置：绝对”区别有所修正，所以我可以了解其发生的原因。

通常事情在铬而不是IE浏览器，其奇怪的是它与这一件事倒退。右边的跨度对两个浏览器都是一样的，在中间跨度后到左上角并用css代码正确调整。

Answer 1

试试这个。 http://necolas.github.io/normalize.css/也许你的浏览器正在做一些技巧，因为你不能期望所有的工作都一样。理想地使用CSS之前，您需要重置CSS。

Answer 2

我的解决方案最终将标记为“test_float”的部分从跨度更改为div，然后在浏览器上执行相同的操作，然后根据需要对其进行定位。