Chrome浏览器左浮动问题

Question

我的Chrome浏览器版本是最新的31.0.1650.48。

今天我注意到float:left似乎不能正常工作。（IE和FF都没问题，而且Chrome以前也很好用。）

HTML代码如下：

<div class="listWrapper collapsed clearfix">
  <ul>
    <li><a href="" title="aa"></a></li>
    <li><a href="" title ="bb"></a></li>
    <li><a href="" title ="cc"></a></li>
  </ul>
  <div class="ui-checkbox" role="checkbox" tabindex="0" style="display:inline-block;"></div>
</div>

CSS 就像：

.ui-checkbox {
   background: url("../images/elements/form.png") no-repeat -183px -331px;
   width: 37px;
   height: 31px;
   float: left; 
}

现在出现的问题是内部的复选框

不能与一开始的

和
• 浮动在一起。但如果我右键单击该
  ->检查元素 ->取消选中'float：left'，然后重新选中它，它就变正常了。
  

  谁有任何想法吗？
  

  添加：

  是float：left，每个
  • 实际上都有一个背景图像，并且也是float：left。在这种情况下，3（li）图像一起显示在1行中，下一个div（复选框形状）应该在同一行中显示。但现在，
    除非我取消选中并重新选中它的float：left css，否则会显示到下一行。
    

    再次添加：
    

    请参见2个结果的屏幕截图： 整个

    是float：right，而内部的

    ，
    • 和
      是float left。但是一开始的绿色“复选框”

      显示在所有这些
    • 下面。当我取消选中并重新选中float：left时，它就变成OK了。
      
      谢谢！

- Samuel

---

为什么同时使用float:left和inline-block？ - Ravi Hamsa

您介意提供输出屏幕截图吗？ - Murshid Ahmed

Ravi，其他页面需要在同一行上显示类似复选框的div和标签。即使我删除它，情况也是一样的。 - Samuel

使用 display:inline-block; - Bipin Kumar Pal

我也来到这里是因为Chrome 30和Chrome 31明显地以不同的方式显示了float left。这似乎是一个渲染上的重大变化。 - David d C e Freitas

是的。我在IE10、Firefox甚至Safari中都尝试过，它们都没问题，除了Chrome。 - Samuel

Answer 1

检查您是否已经为

指定了显式的宽度。并检查您的
和复选框div的宽度之和是否小于或等于折叠的div listWrapper的宽度。如果母div没有宽度，则可以尝试此操作。


.ui-checkbox {
   background-color:green;
   width: 37px;
   height: 31px;
   float: left; 
}

ul{
    float: left;
    width:50px;
}

请查看这个Fiddle。

或者更新Fiddle。

- Murshid Ahmed

---

这次结果没问题。也许是因为我的li有图像作为背景？ - Samuel

@Samuel Nah，背景与此无关。也许listWrapper的宽度不大于ul和checkboxdiv的总宽度。无论如何，现在它是否正常工作？ :) - Murshid Ahmed

大师，listwrapper 实际上没有宽度，我们只想让它向右浮动。由于显示的 li 数量是动态的，我们无法设置 listWrapper div 的固定宽度。 - Samuel

Answer 2

.ui-checkbox {
   background: url("../images/elements/form.png") no-repeat -183px -331px;
   width: 37px;
   height: 31px;
   float: left; 
   display:inline-block
}

- Bipin Kumar Pal

---

这种风格已经通过HTML中的内联样式应用了。 - Murshid Ahmed

我可以做到，但结果是一样的 :( - Samuel

Answer 3

不确定为什么不同的浏览器会得到不同的结果，但是您需要将 ul 元素也浮动起来，以便将复选框放在其旁边。此外，正如某人在您的帖子评论中提到的那样，您有一个内联样式将 display 属性更改为 inline-block，这显然会抵消浮动属性。

这里是一个 CodePen。 我用颜色替换了背景图像 URL，只是为了展示行为。

- Shawn Erquhart

---

我已经尝试了，但看起来没问题 :( 也许是因为我的li使用了图片？ - Samuel