奇怪（？）歌剧漂浮
我在 Opera 上有一些奇怪的浮动行为（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>
I have some strange floating behaviour on opera (IE f's up completely different, but that's for later).
I'm floating the i-icons to the right. It works nicely on Fx and WebKit, but opera shifts the icons down a bit. Anyone got an idea how this happenes?
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您使用伪选择器 :after，如下所示：
这应该可以修复 Opera，而且我认为 IE8 也支持 :after。
无耻借用
位置就是一切
If you use the pseudo selector :after, like so :
That should fix Opera, and of the top of my head, I believe IE8 also supports :after.
Shamelessly borrowed from
Position is everything
你使用任何CSS重置代码吗？ 从我的角度来看，你似乎在一些基本元素上得到了额外的填充。
只是为了好玩，请尝试删除 dataGroup 内所有元素的填充和边距，然后再手动设置它们。
Are you using any css reset code? Off the top of my head it seems like you're getting extra padding on some of your basic elements.
Just for kicks and giggles, try removing the padding and margins on all of your elements inside dataGroup, before setting them manually.
解决此问题的唯一方法是在 HTML 中的输入之前添加浮动图像。 不幸的是，当在它应该浮动的元素之后声明它时，Opera 仍然将 float:right 放在新行上。
http://bytes.com/topic/html -css/answers/587691-float-right-goes-next-line
The only way to fix this is have the floating image before the input in your HTML. Unfortunately, Opera still puts a float:right on a new line when it's declared after the element it should float next to.
http://bytes.com/topic/html-css/answers/587691-float-right-goes-next-line