4

我在歌剧上有一些奇怪的浮动行为（IE f 完全不同，但那是以后再说）。我将 i 图标浮动到右侧。它在 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

歌剧 http://img41.imageshack.us/img41/112/operaf.jpg

4

3 回答 3

1

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

.dataRow：之后
{      
    内容： ”。”;  
    显示：块；  
    高度：0；  
    明确：两者；  
    可见性：隐藏；
}

这应该可以修复 Opera，而且在我看来，我相信 IE8 也支持 :after。

无耻地从位置借来的 就是一切

于 2010-03-18T04:09:08.053 回答
1

解决此问题的唯一方法是在 HTML 中的输入之前使用浮动图像。不幸的是，当在它应该浮动的元素之后声明它时，Opera 仍然将 float:right 放在新行上。

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

于 2011-06-27T08:45:53.600 回答
0

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

只是为了好玩和咯咯笑，在手动设置它们之前，请尝试删除 dataGroup 中所有元素的填充和边距。

.dataGroup *
{
    margin: 0px;
    padding: 0px;
}
...
.dataRow...
于 2009-08-27T14:10:59.107 回答