6

次の例を検討してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            div { width: 15em }
            input, textarea, select { width: 100%;
                -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
        </style>
    </head>
    <body>
        <form>
            <div>
                <input value="Input">
            </div>
            <div>
                <textarea>Text area</textarea>
            </div>
            <div>
                <select>
                    <option>One</option>
                    <option>Two</option>
                    <option>Three</option>
                </select>
            </div>
        </form>
    </body>
</html>

border-boxボックスのサイズ変更をサポートするブラウザでは、これは私が望むようにレンダリングされます:

正しいレンダリング http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

ただし、IE 6/7 では、これは次のようにレンダリングされます。

IE 6/7 レンダリング http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

サイズをピクセル単位で設定せずに、IE 6/7 で他のブラウザと同じレンダリングを行うにはどうすればよいですか?

4

4 に答える 4

2

解決策は、CSS と JavaScript を使用して、ブラウザー ベンダーが共謀してスタイルに苦労したフォーム コントロールを置き換えることです。選択は、onmouseup イベントを伴う単なるドロップダウン メニューです。テキストエリアを置き換えることができる JS 駆動のテキスト エディター (リッチでシンプル) は、オンラインでたくさんあります。この目的のためだけのライブラリもあります。（例）

于 2010-05-22T02:03:22.807 に答える
1

これはCSSでは不可能です。私はいくつかの調査をしました、そして私は同じ質問がここの前に尋ねられたことを知りました。解決策は、このboxsizing.htcファイルを使用して、HTMLヘッドに次の行を追加することです。

<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->
于 2010-05-22T01:34:24.857 に答える
1

簡単な修正は、IE6/7 ブラウザーを次のようにハックすることですselect { *width:102.5%; _width:102.5%; }が、幅が広すぎるとピクセルに合わせられない場合があります。

于 2010-05-22T00:57:32.370 に答える
0

Internet Explorer 6、7、および 8 の CSS3 サポートが役立つかもしれません。ページから:

IE-CSS3 は、今後の CSS3 標準で使用できるいくつかの一般的な新しいスタイルを Internet Explorer でサポートするためのスクリプトです。

于 2010-05-22T00:36:58.067 に答える