Question

我在Firefox中浮动字段时遇到了一个奇怪的问题。在Chrome和Safari中一切正常，但Firefox有其他意见:)其他字段都很好，但是这个字段不想正常浮动。

问题出在蓝色领域。

在这里，您可以看到它在Chrome

中的正确浮动方式

您可以在此处查看Firefox version

由于某种原因，这个蓝色字段从第二列开始浮动，而不是从行的开头浮动。

这是我用于字段定位的CSS。基本上我将字段设为百分比并将它们彼此相邻浮动。

这里我指定第一行字段

.deliver-week {width:35%;float:left;} 
.deliver-date-start {width:40%;float:left;} 
.get_delivery {width:23%;float:left;}

这个是针对这些蓝色和红色字段的

.deliver-or {clear:both!important;width:30%;float:left;text-align:right;}
.deliver-date-or {width:70%;float:left;text-align:center;}

这是第3行

.deliver-start {clear:both!important;width:35%;float:left;}
.deliver-day {width:40%;float:left;}
.deliver-date-day {width:23%;float:left;}

你能帮我解决这个吗？

Answer 1

之所以发生这种情况，是因为Firefox将选择框渲染为比Chrome更高的元素，而蓝色文本的容器会被select的容器元素捕获（因为它现在已经过时了）低于其他人）

您可以通过在容器LI上设置固定高度来解决此问题 - height:80px;在我的测试中运行良好（前提是它们不应因任何原因而具有灵活的高度）