google-chrome - Chrome での CSS 背景サイズの問題

Question

青いフレームの中央の div にbackground-size設定された CSS プロパティがあります。729px auto;

IE と Firefox での結果は次のとおりです (赤いボックスでコンテンツを非表示にしています)。

Chrome での結果は次のとおりです。

background-sizeChrome のプロパティに特別なトリックがあるかどうか知っている人はいますか?

Answer 1

画像の代わりにコードを使用しないのはなぜですか? 問題が解決しました。

http://jsfiddle.net/jDMxJ/

HTML:

<div class="blue">
    <div class="red">

    </div>
</div>

CSS:

.blue {
    width: 626px;
    height: 326px;
    box-sizing: border-box;
    border: 2px solid blue;
    border-radius: 10px;
}

.red {
    width: 600px;
    height: 300px;
    margin: 10px auto;
    box-sizing: border-box;
    border: 3px solid red;
    border-radius: 10px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
}

Answer 2

auto実験の結果、Chrome がここのプロパティを認識しないことがわかりました。729px auto;

それはそれを切り取るだけです：

しかし、私がそれに変更729px auto;したとき729px 1px;はうまくいきました！

青いフレームが見えます:)

Answer 3

box-sizing: border-box;あなたのcssで試してみてください。