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 で問題なく動作し、float は 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 ます。利用可能なオプションは次のとおりです。floatnone

  1. フロート: 左
  2. 浮き：右
  3. フロート: なし
  4. float: 継承

そのため、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 に答える