dポイントプレゼントキャンペーン実施中！

Firefox と IE での padding の認識の違いについて

解決済

  • 質問者：umizaru76jp
  • 質問日時：
  • 回答数：7件

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 の違いを解決する方法をご存知の方いらっしゃれば教えていただけないでしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.1ベストアンサー

  • 回答者： EFA15EL
  • 回答日時：

FireFox向けのCSSはあまり書いていないので、


仕様の差についてははっきり分かりませんが、ブラウザによって解釈が異なるというのは以前からある問題です。
一般的な対処方法としては、jsやユーザーエージェントでブラウザを判別し、それぞれ別のCSSを読み込ませるというものが多いと思います。

参考URL：http://www.keynavi.net/ja/bugh/css_multi.html

この回答への補足

上記URLを参考にしてとりあえず、IE用のCSSを作成してみました。しかし、2重管理を要するので、今後どうしようか考え中です。

補足日時：2006/07/28 18:28
通報する
    • good
    • 0
    • 件
通報する

No.7

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を変更した方が良いのかな…。

補足日時：2006/07/28 18:26
通報する
    • good
    • 0
    • 件
通報する

No.6

> 上記の宣言をしたら、デザインそのものが崩れてしまいました…。


あ、見落としてた…。

標準準拠モードでは各ブラウザ間の表示の差異がかなり少なくなりますが、その反面独自拡張などは利用できなくなります。
スクロールバーに色を付けるやつとかがそれに該当しますね。
選択肢は標準準拠モードで正常に表示できるデザインになるよう妥協するか、
諦めて互換表示モードで他の方法を使いレイアウトを調整するかのいずれかだと思います。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： aqucent
  • 回答日時：

> 上記の宣言をしたら、デザインそのものが崩れてしまいました…。


今までのスタイルで適切なデザインになるように書かれていたのですから、仕方がないと思います。
「CSS標準準拠モードにして、他の記述を修正する」か「CSS標準準拠モードを諦めて、代替手段を使う」の二者択一なのではないでしょうか。

この回答への補足

まさしくその二者択一だと思います。とりあえず、両方トライして、以後管理が楽な方にします。

補足日時：2006/07/28 18:29
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： UKY
  • 回答日時：

ブラウザの話とは直接関係ありませんが、質問文にある CSS例は単位が抜けていますね。



× width: 100;
○ width: 100px;

この回答への補足

すみません、この件に関してですが、 px の単位なしでも大丈夫です。デフォルトが px だからだと思います。line-height の場合は px の単位を指定しないとデフォルトで行数扱いされますが。

補足日時：2006/07/28 18:20
通報する
    • good
    • 0
    • 件
通報する

No.3

> 現在宣言しているのは


> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> なんですが…。
後ろの URL を記述しなかった場合互換表示モード、URL を記述した場合標準準拠モードとなります。
省略するかしないかの違いでも極端に変わります。

互換モードの IE は padding を含めた数値を width の値として解釈し、
IE 以外のブラウザでは padding を含めない数値を width の値として解釈します。

この回答への補足

URLを指定した方が良いと思うのですが、なぜにデザインが大幅に崩れてしまうのが不明です…。
本にしたがってCSSによる段組をしているのですが…。

補足日時：2006/07/28 18:24
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： Chimrin
  • 回答日時：

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を指定するという手もあります。

参考URL：http://www.microsoft.com/japan/msdn/ie/ie60/csse …

この回答への補足

上記の宣言をしたら、デザインそのものが崩れてしまいました…。

現在宣言しているのは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
なんですが…。

DIV内に指定できれば一番よいんですが…。
Pへの指定は奥の手として考えておきます。

補足日時：2006/07/27 08:59
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報