ブラウザの文字サイズを変えると、inputのフォームのせいでレイアウトが崩れる

質問

こんにちは。ウェブデザイン初心者の質問です。

HTMLでページをデザインしています。form，input要素を使って検索用のフォームを設置したのですが、Firefox等のブラウザでフォントサイズを大きくすると、そのtableのレイアウトが崩れてしまいます。
リンクが張れないようなので、簡略化したスクリプトを書かせてもらうと、

<table align="center" cellpadding="0" cellspacing="0" width="700" height="225">
<tr>
<td colspan="2" width="400" height="200"><img src="image01.jpg" width="400" height="200"></td>
<td rowspan="2" width="300" height="225">
<script language="JavaScript" src="items.js"></script>
</td>
</tr>
<tr>
<td width="200" height="25" align="right" background="image02.jpg">
<form action="http://www.google.com" target="body">
<span><input name="" size="28" maxlength="80" type="text"></span>
</form>
</td>
<td width="200" height="25"><img src="image03.jpg"></td>
</tr>
</table>

右側のtdはフラッシュファイルです。この状態でフォントサイズを拡大すると、左側のtdのグループと右側のフラッシュのtdの間に隙間ができて、その隙間がフォントサイズとともにどんどん広がります。このtableの上下には同じ幅のtableがあり、それらの横幅は変わらないため全体のレイアウトが激しく崩れてしまいます。formを削除するとこのようなことは起こりません。
tableタグを使わずに、cssでのデザインも試みましたが、結局フォームがあるとないとで同じ結果になります。
firefoxではフォントサイズを絶対値で固定することができなくなったと聞いたのですがそのせいでしょうか？

解決策をご存知の方がいらっしゃったらぜひお願いします。

回答No.1

abril · ベストアンサー

> firefoxではフォントサイズを絶対値で固定することができなくなったと聞いたのですがそのせいでしょうか？

FirefoxではCSSでfont-sizeにどの様な単位を定義していたとしても、ブラウザ側の文字サイズの変更に合わせ「必ず可変」の状態になります。というか、主なモダン・ブラウザで未だに（px指定で）でfont-sizeが固定されてしまうのはIEぐらいです。

> この状態でフォントサイズを拡大すると、左側のtdのグループと右側のフラッシュのtdの間に隙間ができて、その隙間がフォントサイズとともにどんどん広がります。

<input>タグの"size"による「長さ」は絶対値ではない為、環境によってかなり表示幅の解釈が異なりますし、ブラウザ側の文字サイズをアップしていけば自ずと<input>の幅も広がってしまいます。

> formを削除するとこのようなことは起こりません。
> tableタグを使わずに、cssでのデザインも試みましたが、結局フォームがあるとないとで同じ結果になります。

<input>の長さをCSSで固定値にしてやれば、HTML側でsize="XX"と入っていても、CSSでの定義の方が優先されます。
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<form action=" http://www.google.com" target="body">
<input class="hogehoge" name="" size="28" maxlength="80" type="text">
</form>

---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
input.hogehoge {
width: 200px;
}
---------------------------------------------------------------------
<form>の入る<td>がwidth="200"となっていたので、そこに入る<input>タグに対してhogehogeというclassセレクタを定義し、widthを200pxとしています。

これで問題の<input>タグの部分も長さは固定される筈ですが、いかがでしょうか？

お礼

CSSでサイズを定義したらうまくいきました。
どうもありがとうございます。