高さ 100% の td の入力の実際の高さは異なります。 _html/css

ディスカッションへの返信 (解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

高さ 100% の td の入力の実際の高さは異なります。 _html/css_WEB-ITnose

Jun 24, 2016 am 11:50 AM

まず私の意図を言わせてください。
td に入力を配置し、この入力の高さを 100% に設定しました。
この入力を TD の高さに適応させたいので、入力の高さを固定ピクセルに設定したくありません。
適応に問題はありません。 td の高さが増加すると、それに応じて入力の高さも増加します。

しかし、問題はブラウザが異なることです。入力の実際の高さは同じではありません。 chrom、opera、safriはboxモデルに準拠していないらしく、高さがfirefoxと一致しません。
うーん、
私の質問は次のとおりです:
入力を固定の高さに設定する代わりに、Firefox と Chrome で入力の実際の高さを同じにするにはどうすればよいですか?

ディスカッションへの返信 (解決策)

&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;不同浏览器下，input的高度不同&lt;table style=&quot;width: 100px; height: 40px;&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;&lt;tbody style=&quot;height: 40px;&quot;&gt;&lt;tr style=&quot;height: 40px;&quot;&gt;	&lt;td style=&quot;height: 40px;&quot; valign=&quot;middle&quot;&gt;	&lt;input name=&quot;title&quot; style=&quot;width: 100%; height: 100%;border:5px solid blue;padding:5px;background-color:transparent;&quot;&gt;	&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;

ログイン後にコピー

ボックスモデルをよく理解してください

上の階の回答ありがとうございますが、それでも入力のパディングとボーダー幅を保持したいと考えています。

この問題を解決するために、入力の外側の層に div を追加しました。
リーリー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。