input要素のブラウザによる長さの違いについて

質問

お世話になっております。

今、ホームページを作成しているのですが
メールの入力フォームを作成しており、
ブラウザによるinputフォームの長さの違いの解消に苦心しております。

特に
macでのgooglechromeとwindowsのgooglechromeで
同じブラウザにも関らず表示される長さが変わってしまうところが解消できません。

<div id="mailform">
<p><input name="mail" id="input_form" value="テキスト" onfocus="this.value=''" tabindex="2" type="text"><br /></p>
</div>

#mailform{width:100px;}

で設定しているのですが
macでの表示が短くなってしまい、テキストが入りきりません。

どなたか解消方法分かる方がおられましたらご教示戴ければ幸いでございます。

回答No.3

ORUKA1951

<input name="mail" value="" size="20"-----のようにサイズは入れておきましょう。!!
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
size = cdata [CN]
　この属性は、ユーザエージェントに当該コントロールの初期幅指定を示す。この幅はピクセル値だが、 type属性が"text"または"password"の場合は、文字数を示す整数を値とする。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Forms in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/interact/forms.html#adef-size-INPUT )］より

なお、ごらんのように文字数ですから、文字幅が違うとサイズは異なりますが、それは問題ではないでしょう。最大見込まれる数字を入れておきましょう。

#mailform{width:100px;}
の指定は、id="mailform"の付いている要素に対して指定でしかありません。このセレクタは
*#mailform　詳細度 0,1,0,0
と言う意味です。id属性がmailformである全称セレクタと言う意味です。本来なら
div#mailform 詳細度0,1,0,1
　と書くべきでしょうが、詳細度がB=0と大きいことと、他にありえないので#だけでも構いません。
　しかし、widthプロパティは継承されませんから、その子孫要素であるpやinputには継承されません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
'width'
　Value: 　　　 <length> | <percentage> | auto | inherit
　Initial: 　　 auto
　Applies to:　 all elements but non-replaced inline elements, table rows, and row groups
　Inherited:　　no　<-- 継承しない
　Percentages:　refer to width of containing block
　Media: visual
　Computed value: the percentage or 'auto' as specified or the absolute length
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Visual formatting model details( http://www.w3.org/TR/CSS2/visudet.html#propdef-width )］より

　したがって記述するなら、
#mailform p input[name="mail"]{width:20em;}
　とかでしょうね。
#mailform　idがmailformである要素の子孫のpの子孫の属性名がnameであり、その値がmailであるinput要素{の幅width:の値は20(大文字のM２０個の幅)

回答No.2

神崎 渉瑠（@taloo）

フォントの違いじゃないでしょうか？

CSSでfont関連のプロパティ全て、letter-spacingなども含めてpxで指定しておけば、だいたい同じになるんじゃないでしょうか。

font-familyを同じにするためにWebFontsがありますが、
日本語フォントは5MB近くありますからあまりおすすめはしませんが、全く同じにするのを最優先にするならそれも必要だと思います。

回答No.1

SAYKA

boxの外側のblockを width:100px にして内側にinputを持ってきて width:100% にしたらできそうだけどそういうのはだめ？