0

我有以下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 screen CSS 文件：

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

这在 Chrome 中运行良好，浮动设置为 none 并将占用整个宽度。在 IE 中它将被设置为float: left，这对设计没有好处？

我该如何解决这个问题？

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

4

3 回答 3

11

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

所以，

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

float 属性没有这样的值，但兼容。看这里

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

值由 w3.org 指定：

剩下

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

正确的

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

没有任何

该框不浮动。

继承

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

于 2013-09-29T08:55:02.820 回答
4

正如我在评论中所说..

您可以将here 其float视为none初始值。可用的选项是

  1. 向左飘浮
  2. 浮动：对
  3. 浮动：无
  4. 浮动：继承

所以使用float: none而不是float:initial

Chrome 之所以有效，只是因为他想对你好.. :)

于 2013-09-29T08:56:08.020 回答
3

利用

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

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

于 2013-09-29T08:57:54.970 回答