ページ内の IMG タグに基づいて CSS スプライトを自動的に作成し、スプライト画像を背景として配置して適切な部分を表示させる適切な CSS を使用して (私が考えていた) DIV に置き換えるコードを作成しました。問題は次のとおりです。 DIV を IMG の代替品として動作させることはできません。
デフォルトの「表示」値を「ブロック」に設定したままにしておくと、元の IMG がテキストの最後に配置されていた場合、置換 DIV はテキストの後の次の行にジャンプします (もちろん、これは何かを期待するものです)表示あり: することをブロックします)。
「表示」をインラインに変更すると、DIV はテキストと同じ行にとどまりますが、設定した「幅」と「高さ」は無視され、折りたたまれます。DIV 内に 's を入れようとしましたが、nbsp を含めるのに十分な幅しか占有しません。
display をすべての可能な値 (「table-row」、「run-in」、「compact」などの「あいまいな」値を含む) に設定して実験してみましたが、すべてうまくいきませんでした。IMG と同じレイアウト動作で DIV を作成することさえ可能ですか?
私は単一のDIVよりも複雑なものを用意していますが、そこで明らかなことを試しました(内側のDIVが表示されるように設定されている別のDIV内の1つのDIV:表示する外側のセットを持つブロック:インライン)が、私は持っていません動作する組み合わせも見つかりませんでした。
置き換えられた IMG/DIV の外で、必要なレイアウトを取得するためにできる特定のことは常にありますが、私の目標は、残りの HTML に関係なく機能する汎用の自動 CSS スプライト メカニズムを持つことです。