IE认为浮动初始是浮动的吗？

Question

我有以下html：

<div class="cleanContainer"> 
    <div style="height:80px">test</div>
</div>

这个CSS：

.cleanContainer
{
    float:                      left;
    padding:                    7px;
    background-color:           #ffffff;
    width:                      786px;
    -moz-border-radius:         2px 2px 2px 2px;
    -webkit-border-radius:      2px 2px 2px 2px;
    border-radius:              2px 2px 2px 2px;
}

然后我得到了一个@media屏幕CSS文件，我得到了这个：

.cleanContainer
{
    float:                      initial;
    padding:                    3px;
    width:                      auto;
}

这在Chrome中运行良好，浮点数设置为无，将占据整个宽度。在IE中，它将设置为float: left，这对设计没有好处吗？

我该如何解决这个问题？

编辑：这是一个示例：http://jsfiddle.net/snowman/ahCga/2/

Answer 1

@Alochi在http://www.w3.org/TR/css3-values/#common-keywords找到了初始值，因此OP在视图中没有错，但尚未针对所有浏览器实现。

所以，

使用float: none;代替float: initial;

浮动属性没有这样的值兼容。 See here

Description
--------------------------------------------------------------------
Values            |  left   |    right     |     none    |   inherit
--------------------------------------------------------------------
Initial value     |  none  
--------------------------------------------------------------------
Applies to        |  All element
--------------------------------------------------------------------
Inherited         |  No
--------------------------------------------------------------------

值由w3.org指定：

<强>左

  

该元素生成一个浮动到左侧的块框。内容从盒子的右侧开始流动，从顶部开始。

从右

  

与'left'类似，除了盒子向右浮动，内容从盒子的左侧流动，从顶部开始。

<强>无

  

盒子没有漂浮。

<强>继承

  

使用与元素父级的属性相同的指定值。

Answer 2

正如我在评论中所说的那样..

你可以看到 here float为none作为初始值。 和可用的选项是

1. float：left
2. float：right
3. float：none
4. float：inherit

因此请使用float: none代替float:initial

Chrome之所以有效只是因为他试图与你相处......：）

Answer 3

使用

.cleanContainer
{
    float:none;
    padding:3px;
    width:auto;
}

CSS规范中没有“float：initial”，“initial”表示默认状态为“none”。