入力欄の高さが揃わない

解決済

質問者：ORmituhide
質問日時：2006/05/02 06:15
回答数：3件

入力欄の高さをスタイルシートで設定しているのですが、何故かxhtmlだとfirefoxやNNで高さがおかしくなります。

<?xml version="1.0" encoding="euc-jp"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<title>テスト</title>
</head>

<body>

<form method="post" action="">
<input style="height:20px" type="text" name="username" />
<input style="height:20px" type="password" name="password" />
</form>

</body>
</html>

このソースはテスト用に書いたものですが、ピクセルで指定しているのにIEとNNやfirefoxで高さが違うのです。およそ5pxほどの差が出てしまうのですが、原因が分からずに困っています。xhtmlの宣言がおかしいのかもと思っていろいろと試しましたがダメでした。どなたか、知恵をお貸しくださいませ。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： noname#20378
回答日時：2006/05/02 15:06

Sleipnir 2.40 beta 1(build2402110)とFirefox 3.0a1で実験したところ、5pxかはともかくSleipnirの方が高さが小さいことを確認できました。

xml宣言を外したところSleipnirの高さが広くなったことから原因はDOCTYPEスイッチが原因であると思われます。たぶんwidthの解釈の違いではないかと予測しています

参考:
DOCTYPE 宣言による「解釈モード」の切り替え
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/D …
とその続編
「DOCTYPE スイッチ」 CSS 解釈実例編
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/D …