FirefoxとOperaがCSSを勝手に補完

質問

<input type=text style=width:0>

このようなinput要素にwidth:0というstyleを付加した小さなドキュメントを用意し、
Firefox(5)やOpera（11.50)で見ると、勝手にwidthを1pxに書き換えられます。

IE9,Safari(5.1),Iron(11)では同様の現象は確認できませんでした。

しかし、仕様の犬であるFirefoxやOperaがやることが間違っているとは思えないのです。
訳のわからないハックを使った解決は望んではいません。
FirefoxやOperaが正しいとわかるソース、あるいはIE9やWebkit系ブラウザが正しいとわかるソースをください。
ご存じの方おられましたら、よろしくお願いします。

回答No.5

think49 · ベストアンサー

1px というのはどうやって計測した結果でしょうか？
試してみたところでは、「Firefox4 = 2px, Opera11.50 = 1px」の結果になりました。
http://jsfiddle.net/q6zvd/1/
不思議なことに Firefox4 の拡張「Firebug」では "width: 0px" と出ています。
Firefox4, Opera11.50 のバグっぽいですね…。

お礼

Firefox5では1pxになると思います。お試しください。

> 1px というのはどうやって計測した結果でしょうか？
FirebugやDragonflyでメトリックスを見たり、Windowsの拡大鏡で目視したり、背景色やアウトラインを使ったりして計測しています。

やはりFirefoxとOperaがおかしいですよね。しっくり来ませんが。

ご回答ありがとうございました。

回答No.8

think49

#5, 7 です。

> バグが報告されているのは知っていますが、
ありゃ、報告済みなんですね。差し支えなければ該当URLを教えてください。

> こんなことすぐに直せるでしょう、きっと。
確認してみたところ、Firefox6 では未修正のようですね…。

お礼

ご回答ありがとうございました！

質問内容は解決しましたので、終了させていただきます。

widthは18px持たせておき、paddingも変更するようにしました。

補足

> ありゃ、報告済みなんですね。差し支えなければ該当URLを教えてください。
この件ではなく、Firefoxにバグがあることのことでした。わかりづらくて申し訳ありません…。

> 確認してみたところ、Firefox6 では未修正のようですね…。
そのようですね…。

回答No.7

think49

#6 です。

> Firefox5では1pxになると思います。お試しください。
失礼しました。
Firefox5 で試してみたところ…、"2px" になりました。
環境依存なのかな。新しくプロファイルを作り直したので余計なアドオンは入ってないはずなのですが…。

> やはりFirefoxとOperaがおかしいですよね。しっくり来ませんが。
Firefox は多くの点で IE よりWeb標準に準拠していますが、バグがないわけではありません。バグ自体は多数報告されています。
https://bugzilla.mozilla.org/describecomponents.cgi?product=Firefox

実装の違いが見受けられる場合に「Firefoxが正しいはず」と思いこむのは危険だと思います。
IE を日常的に使っている人が IE と Firefox のレンダリングの違いを見て「これってFirefoxのバグですか？」と疑問を持つのと本質的には同じです。
CSS2 仕様を読む限りでは width に最小値があるという規定は見つかりませんでしたので、Firefox5, Opera11.50 のバグではないかと。

<input size="10"> も試してみましたが、私の環境では Firefox5 = 2px, Opera11.50 = 1px となりました。
http://jsfiddle.net/q6zvd/2/

解決策としては初めに <div tabindex="1"> で描画しておき、focus 時にJavaScriptで要素を入れ替える、とかでしょうか。
width: 0; な要素に focus するのはユーザビリティが低いような気もするので、要求仕様を変更することも考慮に入れるといいかもしれません。

補足

おっと…。こちらも2pxでした。失礼しました。

バグが報告されているのは知っていますが、こんなことすぐに直せるでしょう、きっと。

widthに最小値があるとは思えませんが、テキストボックスなら隠さないためにそうしていてもおかしくないかなあと思ったのです。
確かにおっしゃるとおりです。気をつけます。

解決策の提示、感謝します。
なんだかしっくり来ませんが、検討してみます。
ありがとうございました！

回答No.6

ORUKA1951

＞transitionプロパティを使っているので、displayではなくwidthで指定する必要があるのです。
　static∈transitionalですから、「widthで指定する必要がある」と言うことはありません。
　trasisinalは、
・ユーザーエージェントは解釈しなければならないが、著者は使うべきではない
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
移行のための仕様です。!! ここを結構誤解されている方が多い。(HTML5では、このあいまいな記述が反省されて初きり明文化されましたが、HTML4(XHTML1.0)もよく読めばそう書いてある。
　よって、staticで使える要素/属性は、transitionalですべて使えます。「widthで指定する必要がある」ということはありません。
　いずれにしても<input type="text" value="" name="test" size="10">とsize属性は必須です。sizeがない場合ブラウザは補完することになっている。

＞inputの大きさのことではなくて、inputのwidthスタイルプロパティのことを言っています。
　widthプロパティが指定されるのはブロック要素ですが、inputのような行内要素の場合は、それを内部的にはインラインブロック要素に変換した上で適用されます。input[type="text"]は自体WAIでゼロ幅は使えない。
　<input type="text" size="0">だとどうなりますか?

補足

ちょっと待ってください。
移行型DTDと勘違いされていませんか？
僕が言っているのは、CSS3のtranditionプロパティです。

回答No.4

ORUKA1951

width:0を「小さなドキュメント」という意味がわかりません。Documentとtextは違いますよ。
　また、widthは標準モードでは、内辺サイズですからborderの内側のサイズです。テキストに適用した場合は本来は内容の大きさによって変わる。

　たとえばあるフォームにおいて、ポインターでhoverすると入力欄を表示したいなら
form li:hover input[type="text"]{display:inline;}
form li input[type="text"]{display:none;}
<form>
<ul>
<li>氏名<input type="text" size="20" name="name"></li>
<li>住所<input type="text" size="40" name="address"></li>
</ul>
<p><input type="submit" value="送信"></p>
</form>
とかでよいはず・・・

補足

> また、widthは標準モードでは、内辺サイズですからborderの内側のサイズです。テキストに適用した場合は本来は内容の大きさによって変わる。
そういうことではありません。inputの大きさのことではなくて、inputのwidthスタイルプロパティのことを言っています。

ソース提示ありがたいのですが、勘弁に書きすぎました。
transitionプロパティを使っているので、displayではなくwidthで指定する必要があるのです。

回答No.3

ORUKA1951

WAIで、そのような隠しinputはしないことになっています。
　WEB標準とは、HTML,CSSだけでなく、WCAG(Web Content Accessibility Guidelines)とDOMも含まれています。
　その関係ではないかと・・

　style="display:hidden"

で消えるはず、ただし、検索エンジンからはspamとみなされる可能性があるので、<input type="hidden" value="なんたらかんたら" name="test">のほうがよい。

お礼

やはりそういうことなのですよね。しかし、消したいわけではないのです。簡単に書きますと、

HTML
<input>

CSS
@import('html5reset.css');
input{background:url('finder.png') 0 0 no-repeat;padding-left:18px;width:0}
input:focus{width:120px}

という感じで、フォーカスしたらボックスを広げて、文字が打てる状態にしようと思ったのです。

>>WAIで、そのような隠しinputはしないことになっています。
やはりそういうことなのですね。
ご回答ありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

Operaって結構IEよりの実装だったこともあるので、仕様（W3C）の犬というわけでもないと思いますけどね。

>FirefoxやOperaが正しいとわかるソース、あるいはIE9やWebkit系ブラウザが正しいとわかるソースをください。
width:0やheight:0の扱いについてはどちらが正しいかわかりません。
どちらかというとIE9/Webkitの方が正しいと思いますが。

というわけで、対応方法の案だけですが。
overflow:hiddenを付けてみるとどうでしょうか。
制作条件次第ではwidthは適当にして、visibility:hiddenもいいかもしれません。

お礼

>>overflow:hiddenを付けてみるとどうでしょうか。
だめみたいです。

ご回答ありがとうございました。

回答No.1

SAYKA

width:0　をダブルクォティションで囲っても特に変わらない？

補足

変わりません。
HTML5では<>'"`= （スペース）などがない属性値の引用符を省略することが認められています。
http://www.w3.org/TR/html5/syntax.html#attributes-0