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;

浮动属性没有兼容的这种值.看这里

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

值由w3.org指定:

剩下

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

对

类似于"左",除了框向右浮动,内容从框的左侧流动,从顶部开始.

没有

盒子没有漂浮.

继承

获取与元素父级的属性相同的指定值.