過去ログ表示


過去ログ 25 を表示

トピック内全 4 記事中の 1 〜 4 番目を表示
[ 最新記事及び返信フォームをトピックトップへ ]
このトピックの全ページ / [0]

style の line-height は <input> にも適用されますか?
(#3587) このトピック中1番目の投稿
こんばんは。
下記に示す html ドキュメントを閲覧した時に、
IEだと上下とも、「閉じる」がボタンのまん中に入ります。
しかし、mozilla で見ると、下はまん中に来るのですが
上は「閉じる」の文字が下にズレてしまいます。

この場合の見え方はどちらが正解なのでしょうか?

-----^
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP">
  <title>ボタン</title>
  <style type="text/css">
    p{ line-height: 25px; }
  </style></head>
<body>
&lt;p&gt;囲いあり<br>
<p>
<input type="button" value="閉じる" onclick="window.close()"><br>
</p>
&lt;p&gt;囲いなし<br>
<input type="button" value="閉じる" onclick="window.close()"><br>
</body>
</html>
-----$

# 某所のボタンがズレて見えてまして、作者の意図なのか mozilla の不具合なのか
# 切り分けをしたく・・・・



> この場合の見え方はどちらが正解なのでしょうか?

IEもmozillaも少しずつ変ですね。

見やすいようにテーブル枠を付け表示してみました。
line-height:125px;color:red; と変えてます。
inputタグ内テキストの受ける影響が少しわかります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift-jis">
<title>ボタン</title>
<style type="text/css">
p{line-height:125px;color:red;}
</style></head>
<body>
<table cellSpacing="0" cellPadding="0" align="left" border="1">
<tdody>
<tr><td>
<p>&lt;p&gt;囲いあり</p>
</td></tr>
<tr><td>
<p><a href="xxx">AAA<input type="button" value="AAA 閉じる" onclick="window.close()"></a></p>
</td></tr>
<tr><td>
&lt;p&gt;囲いなし
</td></tr>
<tr><td>
AAA<input type="button" value="AAA 閉じる" onclick="window.close()">
</td></tr>
</body>
</html>

mozillaの場合、<a></a>の影響はありますが、色は変わりません。
しかし、line-hightは影響を受け、そのためテキストがボタンをはみ出す
ようです。試しに、win98の場合ですが、\res\forms.cssにinput定義してい
るcssファイルがありますので、 line-heightを影響させないために、
line-height: 100%; を追加してみました。結果、期待どうりに表示されました。

/* buttons */
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
padding: 2px 0 2px 0;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: 100%;       <- 追加
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-user-focus: normal;
-moz-binding: none;
}


> # 某所のボタンがズレて見えてまして、作者の意図なのか mozilla の不具合なのか
> # 切り分けをしたく・・・・

http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=2192 「input[type=submit]のテキストにline-heightを適用すべきではない」がオープンされています。


hide さん、Wada さん、おはようございます。

現状をみると仕様(というか不具合)の様ですね。
# 本家の future はどうにかならないものだろうか・・・(^^;)

ありがとうございました。
済!

このトピックの全ページ / [0]

返信不可


- Child Tree -