問題タブ [background-size]

私は次のコードを持っています：

背景画像の幅を変更することはできますか?

背景画像を使用して Twitter の背景ボタンを作成しました。

html:

Retina ディスプレイ画面に対応するために、元の背景画像を少し大きく (64px x 64px) し、css background-size を使用してサイズを縮小しました。chromeでの画像表示はシャープですが、Firefoxでは画像を少し大きくしたのにぼやけて見えます…。

CSS:

http://codepen.io/vincentccw/pen/krqLC

Chrome では完全に動作しているのに、IE8 では JSTree のレンダリングが非常に悪い理由について、私は多くのことを調査しました。問題の少なくとも 1 つは、IE8 が css-property をサポートしていないことですbackground-size。フォルダーとファイルを表すカスタム アイコンを使用しています。ツリー構造の各行の高さは IE8 では 24px ですが、chrome では 40px です。後者のブラウザは、 を使用してアイコンのサイズを自動的に折り返すことにより、行の高さを計算しますbackground-size: auto;。IE8 にはありません。

IE8 の不足している機能を補うために、次のようなさまざまなソリューションを実装しようとしました。

IE で background-size を機能させるにはどうすればよいですか?

IE 8: 背景サイズの修正

リンク先のhttps://github.com/louisremi/background-size-polyfill

ただし、jstree の複雑さとそれがデフォルトの css ファイルであるため、default.css の構造を完全に理解する経験が不足しているため、これらのソリューションを既存のコードに実装するのに非常に苦労しています。 .

これを機能させるための正しい行動方針は何でしょうか? IE8 用の互換性のある .css ファイルも検索しましたが、何も見つかりませんでした。

自分の .css をゼロから作成しなければならないという私の恐れを確認し、それを完全に理解する答えも大歓迎です。ただし、そのために時間を費やす前に、セカンドオピニオンが欲しいです。

編集: これらは私の現在の状況のスクリーンショットです:

Chrome には適切な間隔があり、シェブロン/矢印/エキスパンド アイコンが表示されます。また、フォントも機能します。

IE8 には自動サイズがないため、高さが 40px ではなく 24px になります。手動で 40 に設定しようとしましたが、うまくいきませんでした。視覚的な精巧さの欠如はそれほど気になりませんが、矢印展開アイコンの欠如は、アプリケーションの使いやすさにとって不可欠です。

現在のテーマの作業中の編集は、回答として受け入れられます。そのため、IE8 に準拠した代替テーマにリンクします。または、自分で問題を解決する方法を理解するのに役立つもの。

最大幅を取得するために IE8 のハックを使用しています。スクリプトはローカルでは問題なく動作していますが、サーバーにアップロードすると、何らかの理由で動作しません。ここにリンクがあります

ハックは

このスクリプトを機能させたいのですが、ローカルで完璧なので、他の多くのスクリプトを試してみましたが、既に実行されている他のスクリプトと競合していました。

として設定された画像で固定divを実行しようとしていますbackground-image。に設定しbackground-sizeて100%、大きな画面の解像度やズームアウト時に繰り返されたり、小さすぎたりしないようにします。現在の問題は、モバイル デバイスでは背景画像が小さすぎて表示領域からはみ出すことです。

どうすればこの問題を解決できますか? より良い解決策はありbackground-size:100%ますか？

CSS:

ウィンドウの幅が (background-size:100%) のようにサイズ変更されているときに、div の高さ/幅を一緒に動的にサイズ変更したいのですが、「可能であれば」CSS のみを使用することを好みます。

前もって感謝します ：）

Ipad と Iphone でテストすると、背景が完全に間違っているように見えます。私の問題については、ここでstackoverflowを検索しましたが、運がありません! 「background-size:cover」が問題であることはわかっていますが、修正方法がわかりません。