- ベストアンサー
Firefox と IE での padding の認識の違いについて
CSS にて padding の記述をしているのですが、IE と Firefox で padding の認識の仕方が違い困っております。 例えば、幅100px の枠に左右の padding を 10px 指定した場合、幅100px の内に 10px の padding を取るのが IE であり、幅100px の外側に改めて padding 10px 取る（最終的に幅が120pxになる）のが Firefox であるようにです。 CSS例 #header { float: left; padding: 0 20; width: 100; height: 20; text-align: right; } このIE と Firefox の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？ よろしくお願いします。
- umizaru76jp
- お礼率35% (13/37)
- HTML
- 回答数7
- ありがとう数4
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
FireFox向けのCSSはあまり書いていないので、 仕様の差についてははっきり分かりませんが、ブラウザによって解釈が異なるというのは以前からある問題です。 一般的な対処方法としては、jsやユーザーエージェントでブラウザを判別し、それぞれ別のCSSを読み込ませるというものが多いと思います。
その他の回答 (6)
widthとDOCTYPEの関係は皆さん解説されてるので割愛。 どうしてもDOCTYPEを現状のままにしたいのであれば、 <style> #header{ width:100px; （その他略） } </style> <!--[if IE]> <style> #header{ width:120px; } </style> <![endif]--> という、IE専用の分岐（コンディショナルコメント）でIEのみスタイルを上書きするのも手かと思います。 <style> #header{ width:100px; （その他略） _width:120px; } </style> というアンダースコアをつけることでIEのみ上書きされる方法もありますが、IE7では使えなくなる（修正される）ようですので、 もし分岐させるなら、コンディショナルコメントをおすすめします。
補足
上記のような方法でとりあえず、IEとその他用でCSSを作成していますが…2重管理しないといけないのがやっぱり面倒ですよね。DOCTYPEを変更した方が良いのかな…。
> 上記の宣言をしたら、デザインそのものが崩れてしまいました…。 あ、見落としてた…。 標準準拠モードでは各ブラウザ間の表示の差異がかなり少なくなりますが、その反面独自拡張などは利用できなくなります。 スクロールバーに色を付けるやつとかがそれに該当しますね。 選択肢は標準準拠モードで正常に表示できるデザインになるよう妥協するか、 諦めて互換表示モードで他の方法を使いレイアウトを調整するかのいずれかだと思います。
- aqucent
- ベストアンサー率39% (78/200)
> 上記の宣言をしたら、デザインそのものが崩れてしまいました…。 今までのスタイルで適切なデザインになるように書かれていたのですから、仕方がないと思います。 「CSS標準準拠モードにして、他の記述を修正する」か「CSS標準準拠モードを諦めて、代替手段を使う」の二者択一なのではないでしょうか。
補足
まさしくその二者択一だと思います。とりあえず、両方トライして、以後管理が楽な方にします。
- UKY
- ベストアンサー率50% (604/1207)
ブラウザの話とは直接関係ありませんが、質問文にある CSS例は単位が抜けていますね。 × width: 100; ○ width: 100px;
補足
すみません、この件に関してですが、 px の単位なしでも大丈夫です。デフォルトが px だからだと思います。line-height の場合は px の単位を指定しないとデフォルトで行数扱いされますが。
> 現在宣言しているのは > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> > なんですが…。 後ろの URL を記述しなかった場合互換表示モード、URL を記述した場合標準準拠モードとなります。 省略するかしないかの違いでも極端に変わります。 互換モードの IE は padding を含めた数値を width の値として解釈し、 IE 以外のブラウザでは padding を含めない数値を width の値として解釈します。
補足
URLを指定した方が良いと思うのですが、なぜにデザインが大幅に崩れてしまうのが不明です…。 本にしたがってCSSによる段組をしているのですが…。
- Chimrin
- ベストアンサー率49% (42/85)
IE6以降のみの対応ですが、適切な!DOCTYPE宣言を行うことで、IEのCSS標準準拠モードを有効にすることができるようです。詳しくは参考URLを参照してください。 例えば、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と宣言することで、Firefoxと同じような感じでpadding等の計算をやってくれるはずです。 !DOCTYPE宣言を使えないのであれば、かなり面倒ですがdivなどの「箱」にはpaddingを指定せず、内側のpなどの要素にmarginを指定するという手もあります。
補足
上記の宣言をしたら、デザインそのものが崩れてしまいました…。 現在宣言しているのは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> なんですが…。 DIV内に指定できれば一番よいんですが…。 Pへの指定は奥の手として考えておきます。
関連するQ&A
- ＦｉｒｅＦｏｘで見ると表示がおかしくなってしまいます
困っています。質問させてください。 このカテゴリでいいのか分からないのですが・・・。 ＨＰを運用しているのですが、聞きかじりのcssを利用しています。 ＩＥだと場合によっては普通に表示されるのですが、FireFoxだと文字がどでかく表示されてしまって、レンタルスペースはＦＣ２を使っているのですがページの最後に表示されるはずの広告が文字列の中に割り込んでいたりして、表示がめちゃくちゃになってしまいます。 ちなみに使っているcssは * { margin:0; padding:0; } html { text-align:center; height:100%; } body { width:600px; height:100%; text-align:left; } #HEADER img { display:block; } #NAV { float:left; width:200px; height:100%; margin-top:-100px; padding-top:100px; } #CONTENT { width:650px; height:100%; margin-top:-100px; padding-top:100px; margin-left:200px; } です。index.htmlのbody部分にはfontの大きさは全く指定していません。 よろしければFireFoxでご覧になってみてください。 http://clovermiwa.web.fc2.com/ 私はＨＴＭＬをかじったくらいで、cssについては全く分かりません。 ＨＴＭＬが間違っているのかもしれません。 色々いじってみましたが、問題が解決されず、困っています。 よろしければご教授、お願い致します。
- ベストアンサー
- HTML
- safariやFirefoxで右のカラムが下へ行ってしまう
CSSで A B C D という4つのカラムでレイアウトしたいので下記のようなCSSにしました。 ------------------------------------------------ #A{ width:700px; } #B{ float:left; padding-top: 15px; width: 150px; height: 100%; } #C{ float:right; text-align: left; width: 550px; padding: 15px 50px 30px; } #D{ position:relative; width:100%; height:50px; clear:both; text-align:center; } ------------------------------------------------ IEでは問題ないのですが、safariやFirefoxでは A B C D となってしまい、BとCが並んでくれません。 Cはテキストのみなので画像等のサイズオーバーでカラム落ちしているわけではなさそうです（長いURLなどもありません） Cのfloat:right;を消すと並んでくれるのですが、そうするとどういう訳かpaddingの指示が無視されてピッタリくっついてしまいます。 IEよりもsafariの方がCSSでは正しいそうなので何か間違っているのだと思うのですが、どなたかご教授ください。
- ベストアンサー
- CSS
- IEとFireFoxでCSSの見た目をそろえたい
CSSの素人ですがボックスを使って2カラムスタイルのデザインを作ろうとしているのですが 完成したのをみるとIEとFireFoxで見た目変わりうまく調整できずに困っています。 足し算はあっているはずなのですがどこを修正すればよいのでしょうか？ HTML <body> <div id="wrapper"> <div id="container"> <div class="header"> <h1> </h1> </div> <div class="kaijyo"></div> <div class="main"> <div></div> <h2> </h2> <div class="kaijyo"></div> <div class="line"> <hr> </div> </div> <div class="menu"> </div> <div class="kaijyo"></div> <div class="footer"> <p> </p> </div> </div> </div> </body> CSS #wrapper{ text-align:center; /*IE対応*/ } #container { width: 980px; margin-left:auto; margin-right:auto; background-color:#CAB59B; text-align:left; } .header{ width: 970px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#000000; text-align:left; height:20px; } .main{ width: 670px; float: left; margin: 0px 0px 0px 0px; padding: 10px 15px 10px 15px; background-color:#E4E4E4; text-align:left; } .menu{ width: 260px; float: left; margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; background-color:#CAB59B; text-align:left; } .footer{ width: 970px; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 10px; background-color:#6F0011; color:#FFFFFF; text-align:left; } .kaijyo{ clear: left; }
- ベストアンサー
- CSS
- divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
- CSSでライブドアブログのレイアウトがIEでだけ、崩れてしまう。
CSSでライブドアブログの左サイドバーのレイアウトがＩＥで見ると、崩れてしまいます。 Fireboxなどでは、きれいに表示されますが、IEでは、左サイドバーの表示がはるか下方に表示されてしまいます。 下記のＣＳＳに問題がないか教えていただけないでしょうか？ 参考になりそうなサイトとして(1)(2)なども見たのですが、結局わからなかったです。 (1)CSSによる段組（マルチカラム）レイアウト講座 http://www.geocities.jp/multi_column/index.html (2)CSSバグリスト http://cssbug.at.infoseek.co.jp/ よろしくお願いします。 /********************************** =2.Common **********************************/ table#header{ width:100%; font-size:12px; color: #cffdcc; } table#header a{ color: #cffdcc; } table#header th{ width:1%; } table#header th img{ margin:2px 10px; width:132px; height:24px; } table#header td.catprbox{ width:1%; white-space:nowrap; } table#header td.catprbox span{ margin-right:15px; } table#header td.newstickerbox{ width:97%; text-align:right; padding-right:10px; } table#header td.startblogbox{ width:1%; padding-right:10px; white-space:nowrap; } table#header td.startblogbox img{ width:17px; height:16px; margin-right:3px; border:0px; vertical-align:middle; } #container{ width:800px; margin:0 auto; text-align:center; } #cgmmenu{ display:none; } #banner{ height:200px; border:solid #fff; border-width:6px; background:#240000 url(http://image.blog.livedoor.jp・・・・・) no-repeat; text-align:left; margin:0 auto; clear:both; } #banner a{ color:#fff; text-decoration:none; } #banner a:hover{ text-decoration:underline; } #banner h1.blogtitle{ padding:80px 30px 5px; font-size:20px; } #banner div.description{ width:500px; padding:0 30px; line-height:135%; font-size:12px; color:#fff; } #blogcontainer{ background:url(http://image.blog.livedoor・・・・) 0 0 repeat-y; border:solid #fff; border-width:0 6px 0; padding:0 0 30px; margin:0 auto; height:1%; } #wrapper{ float:left; width:605px; } #content{ float:right; width:420px; text-align:left; background-color:#F9F3EE; } #contentin{} #left{ float:left; width:180px; } #right{ float:right; width:178px; } #lefttop , #leftbody , #leftbottom , #righttop , #rightbody , #rightbottom {} #footer { background:url(http://image.blog.livedoo・・・・) 0 0 no-repeat; border:solid #fff; border-width:0 6px 6px; height:46px; } #outfooter{}
- 締切済み
- HTML
- Firefoxでpaddingが反映されません。
現在WEBサイトを作っているのですが、IEとFirefoxで確認を行ってみたところ、IEでは正しく表示されるのですがFirefoxだとうまく表示されません。 paddingの指定なんですが、Firefoxだけうまく寄ってくれません、何がいけないのでしょうか（T_T） CSS部分は以下のようになります。 .menu { color: #000000; padding : 5px 0px 0px 30px; font-size : 14px; text-align: left; font-weight: bold; text-transform: uppercase; letter-spacing: .3em; } 問題はpaddingの30pxというところで、左側から30px離したいのですが、全く変わりません。 分かる方いましたら、アドバイス宜しくお願いいたします。
- ベストアンサー
- HTML
- IE6での表示がうまくいかず困っています
すみません！先ほど同様の質問をしたのですが、文字数オーバーで途中で切れてしまっていたので本当に恐縮ですが再度お願いいたします。 コーディングを勉強中なのですが、どうしてもIE6での表示がうまくいかず、大変困っています。色々ググって調べてみたのですが、決定的な原因がわからず本当にどうすればよいのかわかりません・・・。どなたかご教示いただけませんでしょうか。 他のFireFOX,Safari,IE8では多少のズレはあるものの普通に表示されました。IE6では背景画像とフッターのみしか表示されない。という状況です。 CSSは以下です。 /* generated by csscreator.com */ html{ height:100%; } body{ margin:0; padding:0; text-align:center; color: #fff; background: #000000 url("../images/back-right.gif") repeat-x; position: relative; text-decoration: none; height:100%; } body > #pagewidth { height: auto; } img { border-style:none; } ul{ margin:0; padding:0; text-align:left; } li{ list-style-type: none; line-height:100%; } p{ margin:0; padding:0; text-align:right; } #bg_wrap { height: 423px; width: 50%; top: 0px; background: url(../images/back-left.gif) repeat-x; position: absolute; } #pagewidth{ width: 918px; height: 100%; min-height: 100%; text-align:left; margin: 0px auto; position: relative; background: url(../images/left-col.gif) left repeat-y; } #left-container{ width: 130px; height: 100%; float:left; position:relative; padding-left: 23px; } #header{ width: 100%; height: 266px; color: #000; background-color: #fff; } #navigation{ width: 100%; color: #fff; padding-bottom: 5em; } #main-container{ width: 764px; float: right; display:inline; position: relative; } #maincontents{ padding-right: 21px; } #footer{ height: 50px; width: 100%; text-align:left; padding-left: 95px; clear: both; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} } 以上です、よろしくお願いいたします。
- ベストアンサー
- HTML
- Mac IE5.2 のCSS対応
これまでコーディングはテーブルレイアウトばかりでやってきまして、 急いでフルCSSサイト作りの勉強をしているものです。 Windows Firefox、IE6 Macのsafari ではほぼ意図した通りに表示できるようになったのですが、Mac IE5.2ではどうもうまくいかない箇所があります。 listタグにスタイルを指定している部分がまったく効いてないのです。 ブラウザの対応など問題はあると思うのですが、これくらいはできるハズですよね？（汗）できるものと思ってアレコレ試しているのですが。 初歩的な質問でお恥ずかしいのですが、よろしくお願いします。 CSSはこんな感じです。 =========================================================== #header { padding-top: 0px; margin-bottom:20px; position:relative; width:800px; height: 78px; background-color:#575757; } #header #logo { position: absolute; top: 0px; } #header ul { margin: 0; padding: 0 20px 0 20px; list-style: none; float:right; width:550px; background-color:#676767; vertical-align:bottom; } #header li { display: inline; font-size:x-small; line-height:25px; height:25px; list-style-type: none; padding-left: 2.8em; vertical-align:middle; float:left; } #header li a { color:#ffffff; text-decoration: none; padding-left:15px; background:url(../images/arrow_bl2.gif) left no-repeat; } #header li a:visited { color:#ffffff; } #header li a:hover { color:#12A0ED; } =========================================================== htmlのほうはこちらです。 <div id="header"> <a href="../index.html" title="tabi-memo" id="logo"><img src="../images/title_s.gif" width="250" height="78"></a> <ul> <li><a href="../index.html">HOME</a></li> <li><a href=".html">●●</a></li>
- ベストアンサー
- HTML
- IE6だとpaddingで指定したぶんだけ消えてしまう。。。
いま、CSSでサイトつくっているのですが、IE6だけpaddingで指定した分だけ、画像（背景）が足りません。 <h2>と<p>をくっつけて一枚の背景画像を作ろうとしています。 解決するには宣言を変えるか、CSSハック？をする、もしは<div>を入れ子するしかないのでしょうか？ また、<div>を入れ子にするのはよくないと教えていただいたのですが、どれくらいまでが許容範囲でしょうか？ いつもwrapperで囲っているので、大枠のレイアウトを作るだけでもすでに１つ入れ子状態なんですが・・・ <h2>あああああああああああああああああ</h2> <p>あああああああああああああああ </p> .h2 { background-image: url(img/flow6_01.gif); height: 37px; width: 650px; text-indent: -9999px; float: left; margin-bottom: 0px; } #p { width: 625px; height: 120px; float: right; background-image: url(img/flow1_02.gif); margin: 0px; margin-bottom: 10px; background-repeat: no-repeat; padding-left: 25px; }
- ベストアンサー
- HTML
- firefox とie6 でのbackground height wi
firefox とie6 でのbackground height width表示の違い ホームページ作成しています。 初心者です。 globalnavi というdiv のなかに globalnavi li をfloat-rightで横並びにしました。 width 800px height 30px にしたいのですが IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！ #globalNavi{ background-image:url(../menubar.png); width:790px; height:30px; font-size:14px; color: #1C1D21; text-align:center; } #globalNavi li{ float:right; overflow:hidden; width:80px; height:30px; list-style-type:none; text-align:center; color: #1C1D21; border-left-width: 2px; border-left-style: solid; border-left-color: #999; line-height:0; } #globalNavi a{ width:80px; height:30px; display:block; text-align:center; line-height:normal; } #globalNavi a:hover{ width:80px; height:30px; background-position: 0 -80px; background-color:#B7D68D; text-decoration: none;
- ベストアンサー
- HTML
補足
上記URLを参考にしてとりあえず、IE用のCSSを作成してみました。しかし、2重管理を要するので、今後どうしようか考え中です。