奇怪的（？）歌剧浮动

Question

我在Opera上有一些奇怪的浮动行为（IE f完全不同，但这是为了以后）。 我将i-icons浮动到右边。它在Fx和WebKit上运行良好，但是Opera会将图标向下移动一点。有人知道这是怎么发生的吗？

CSS：

.dataRow {
    margin: 5px 0;
    clear:right;
}
.dataRow label{
    display: block;
    float:left;
    width: 160px;
    vertical-align: middle;
    font-size: 80%;
}
.dataGroup a img {
    border:0;float:right;
    position:relative;
    right:0;
}
.dataGroup a:hover {
    background:#EBEDC7;
    text-decoration:none;
}
.dataGroup a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-top:20px;
    width:100px;
    font-size: 80%;
 }
.dataGroup a.tooltip:hover span {
    display:inline;
    position:absolute;
    border:1px solid #632D11;
    background:#C2BD6C;
    color:#fff;
}

HTML：

<fieldset class="dataGroup">
<div class="dataRow"><label>Foobar:</label> <input name="foobar" size="10" value="somedata" /> <a href="#" class="tooltip"><img src="/img/admin/information.png"/><span>Tooltip Info</span></a></div>
</fieldset>

Webkit http://img197.imageshack.us/img197/3269/webkit.jpg

Opera http://img41.imageshack.us/img41/112/operaf.jpg

Answer 1

如果你使用伪选择器：after，就像这样：

.dataRow:after 
{      
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden;
}

那应该修复Opera，而且我认为IE8也支持：之后。

无耻地借来 Position is everything

Answer 2

解决此问题的唯一方法是在HTML输入之前使用浮动图像。不幸的是，Opera仍然放置一个浮点数：当它在它应该浮动的元素之后被声明时，它就在新行上。

http://bytes.com/topic/html-css/answers/587691-float-right-goes-next-line

Answer 3

您使用的是任何css重置代码吗？在我的脑海中，似乎你在一些基本元素上得到了额外的填充。

只是为了踢和傻笑，尝试删除dataGroup中所有元素的填充和边距，然后再手动设置它们。

.dataGroup *
{
    margin: 0px;
    padding: 0px;
}
...
.dataRow...