- ベストアンサー
FirefoxとOperaがCSSを勝手に補完
think49の回答
- think49
- ベストアンサー率59% (285/482)
#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 するのはユーザビリティが低いような気もするので、要求仕様を変更することも考慮に入れるといいかもしれません。
関連するQ&A
- CSSハックの使い方を教えてください
CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }
- ベストアンサー
- HTML
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- CSSハックについて・・・
ホームページを作っていて、IEではちゃんと表示されるのですが、 FirefoxとOperaでは思い通りに表示されません。 これをどうにかしたいと思います。 前に、どこかのサイトでCSSハックという言葉を見たことがあるのですが、主にFirefoxに、CSSハックを利用したいです。 Firefoxのみ、またはFirefoxを含む様々なCSSハックの方法を教えてください！ 今は、OperaよりもFirefoxを優先してほしいです。
- ベストアンサー
- HTML
- Ｆｉｒｅｆｏｘのhtmlとｃｓｓの使い方
Firefoxの件で質問なんですが、現在htmlとcssを勉強している本に 下記のcssはIEでは表示せずFirefox 3.6以上かgoogle Chrome 2以上を使用すれば 背景表示出来ると書いてありましたので両方試した結果背景等はOKですがhtml にカーソルが出て来ませんでした。出来たら操作が慣れているIEのままでこのソースで表示をしたいのですが無理でしょうか？教えて下さい。 #header { width: 760px ; height: 150px ; ( ここから） background: #719a18 ; background: -moz-linear-gradient(top, #719a18, #2a3a09) ; background: -webkit-gradient(linear, left top, left bottom,from(#719a18),to(#2a3a09)) ; } (ここまでです。) #header_inner {padding: 20px ; } #header h1 {margin: 0; font-size: 2em; font-family: Verdana, Helvetica, sans- serif; color: #ffffff ; } #header p {margin: 0 ; margin-top: 8px ; font-size: 1em ; color: #ffffff ; }
- 締切済み
- HTML
- cssハックについて
現在Safariに対してcssハックを適用させようとしているのですが、 そのハックがなぜか他ブラウザにまで影響してしまいます… （Firefox、Operaなど。IEは大丈夫です） なぜ他ブラウザにまで影響してしまうのかが判らないので、 教えて頂けると嬉しいです。 宜しくお願いします。 htmlに対するcss読み込みの記述--------- <link rel="stylesheet" type="text/css" href="css/importtop.css" /> importtop.css内の記述--------- /* For Specific Browsers */ @import "safari.css"; safari.css内の記述--------------- /* Safari4 */ body:first-of-type #content { height: 635px; } body:first-of-type #container { height: 635px; } body:first-of-type #sidebar { height: 635px; } body:first-of-type #content { height: 635px; } body:first-of-type .sbar { height: 635px; } /* Safari3 */ html:not(:only-child:only-child) #container { height: 635px; } html:not(:only-child:only-child) #content { height: 635px; } html:not(:only-child:only-child) #sidebar { height: 635px; } html:not(:only-child:only-child) .sbar { height: 635px; }
- 締切済み
- CSS
- firefoxでdivタグの体裁崩れ
お世話になります。 以下のソースを IEで見るとリスト１、リスト２は同じ内容が表示されます FireFoxで見るとリスト２のlist3が左側につめられて表示されます。 ・これはIE or FireFoxのバグになるのでしょうか？ ・IEと同じようにFireFoxで表示したいのですが出来ますでしょうか？ 申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>DIVタグテスト</title> <body> DIVタグテスト<br> <br> リスト１ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list2</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> <br> <br> リスト２ <div style="width:300px;"> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list1</div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div></div> </div> </div> <div style="float:left;width:100px;"> <div style="width:100px;"> <div>list3</div> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSーfloatについて
divの中にp要素を三つ作成して、最初のp要素にfloat:leftを指定しました。結果MacIEとIE6では2番目のpのみ右に並び、3番目のpは1番目のpの下にある状態です。しかも、FirefoxやSafari・Operaでは3つとも縦に並んだままです。単純なミスのようなきがするんですが解決できません。どなたか助けてください。よろしくお願いします。 以下のコードです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- #box{ background-color:#0099CC; width:400px; padding: 0px; } #A,#B,#C{ color:#FFFFFF; border:1px solid #fff; margin:0; } #A{ background-color:#990000; float:left; width:100px; } #B{ background-color:#003366; width:100px; } #C{ background-color:#336600; width:100px; } --> </style> </head> <body> <div id="box"> <p id="A">AAA</p> <p id="B">BBB</p> <p id="C">CCC</p> </div> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
補足
おっと…。こちらも2pxでした。失礼しました。 バグが報告されているのは知っていますが、こんなことすぐに直せるでしょう、きっと。 widthに最小値があるとは思えませんが、テキストボックスなら隠さないためにそうしていてもおかしくないかなあと思ったのです。 確かにおっしゃるとおりです。気をつけます。 解決策の提示、感謝します。 なんだかしっくり来ませんが、検討してみます。 ありがとうございました！