0

Chromeでのレンダリングで奇妙な種類の矛盾に遭遇しました。

この問題の簡単な例は、次のコードを使用して再現できます。

<html>
<head>
<style>
    input, span {
        border: 1px solid #CCC;
        padding: 3px 4px;
        height: 23px;
        width: 120px;
        display: block;
        font-size: 13px;
    }  
    </style>
</head>
<body>
    <div><span>123</span></div>
    <div><input type='text'/></div>
</body>
</html>​

つまり、一言で言えば、spanとinputは同じサイズである必要がありますが、Chromeは要素を異なる方法でレンダリングすることがわかります。

  • スパンがレンダリングされるので、実際のサイズは31px
  • 入力はレンダリングされるので、実際のサイズは23px

調査の結果、Chromeはspan「内側」（境界線とパディングなし）のサイズが20ピクセルでinputあるようにレンダリングされているように見えますが、「外側」のサイズは20ピクセルです。

実際のアプリケーションでは、コントロールは「インプレース編集」シナリオで使用されるため、ユーザーがスパンをクリックすると、スパンが非表示になり、その場所に入力が表示されます。ご覧のとおり、このようなサイズの違いがあるため、移行はスムーズではありません。Wjatの価値は、コントロールがテーブルセルに配置されることです。そのため、幅と高さの違いにより、テーブル全体のレイアウトが少し変更されます。

私はクロスプラットフォームアプリケーションに取り組んでいるので、IE9でも動作するはずです。input問題は、IEが両方とspan同じサイズをレンダリングするため、ページがIEとChromeでかなり異なって見えることです。私の生活をより困難にするために、これらのコントロールはASP.NETサーバーコントロールによってレンダリングされ、cssのみを変更できます。

Win7x64でChrome23.0.1271.91（投稿時点で最新）を使用しています。

したがって、実際には2つの質問があります。

  1. これを修正するにはどうすればよいですか？
  2. なぜそれが起こっているのですか？明らかな何かが欠けていますか？それは予想される動作ですか？
4

2 に答える 2

1

Chromeはボックスサイズ設定をサポートしているため、次のことを試してください。

<html>
<head>
<style>
    input, span {
        border: 1px solid #CCC;
        padding: 3px 4px;
        height: 23px;
        width: 120px;
        display: block;
        box-sizing:border-box;

    }  
    </style>    
</head>
<body>
    <div><span>123</span></div>
    <div><input type='text'/></div>
</body>
</html>​

http://jsfiddle.net/9esTQ/

于 2012-11-29T15:23:55.847 に答える
1

Chromeはbox-sizing: border-box;、デフォルトで入力要素とテキストエリアに設定します。

両方をスパンのように動作させるように設定box-sizing: content-boxするか、両方をborder-boxに設定して、入力のように動作させるようにします。

ボックスのサイズ設定方法に関する適切な説明は、http ：//www.quirksmode.org/css/box.htmlにあります。

于 2012-11-29T15:27:07.293 に答える