- 締切済み
IE が CSS で指定のボックスの大きさを無視
CSS で指定のボックスの大きさを IE 5.5x、ならびに 6.x (旧 Mac 版含む) が無視します。 否、無視というより、大きめに表示します。 同じ記述でも、FireFox、Opera、ならびに Safari では指定どおりに表示しています。 内容の有無や如何によらず、どのような条件で発生しているかさえ不明です; ボックスの中を埋めて、マージンなどを 0 にしても解決しません。内容のある大きめの別のボックスで上、下、左、ならびに右を詰めても解決しません。 1. 記述の規則に則った方法による解決法を教えてください。 2. この IE の挙動は明らかに異常だと思うのですが、なぜ改善されないのでしょう。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- doublebeefcake
- ベストアンサー率42% (3/7)
訂正です。 標準準拠モードにおけるボックスのサイズとは１）のコンテントを指します。
- doublebeefcake
- ベストアンサー率42% (3/7)
補足です。 XHTML1.0のTransitionalでは、DOCTYPE宣言の前に、XML宣言を書くと、IE6は後方互換モードになります。
- doublebeefcake
- ベストアンサー率42% (3/7)
ブラウザの表示モードには標準準拠モードと後方互換モードがあります。 表示モードの違いにより、ボックスの大きさに関してブラウザは解釈を変えます。 １）コンテント（中身） ２）パディング（中身を覆う余白） ３）ボーダー（コンテントとパディングを覆う線） ４）マージン（１）+２）+３）を覆う余白） 要素は上記の要素で構成されています。 標準準拠モードで指定したボックスのサイズとは、 １）＋２）までを指します。 後方互換モードで指定したボックスのサイズとは、１）＋２）＋３）までを指します。 ゆえに、標準準拠モードと後方互換モードでは表示の仕方が違うのです。 このブラウザの表示モードを制御するのがDOCTYPEスイッチ(宣言)です。 そして、DOCTYPEスイッチに対応しているブラウザは、IEでは6のみです。 ゆえに、IE6以前のIEは、全て後方互換モードと同等の表示になります。 つまり、質問者さんは、モダンブラウザを対象に、標準準拠モードでHTMLを書いたのだと思われます。 ゆえに、モダンブラウザでは全て標準準拠モードで表示され、後方互換モード同等の性質であるIE5.5だけ、表示が違ってしまったということだと思います。 >>解決法 １）DOCTYPEスイッチにより、全てのブラウザを後方互換モードにする ２）WinIE5.5及び、該当する旧MacIEに対応するCSSハック(ブラウザのバグを利用した裏技）をCSSに追加記述する。 >>具体的な記述の仕方 １）以下３つのいずれかをHTMLの先頭に記述 ・DOCTYPE宣言を書かない（無記入） ・<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ・<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> 【結果】全てのブラウザが後方互換モードになります。 ２）ベースとなるCSSファイルに以下のソースを記述します。 ↓【IE5.5のCSSハック】 @media tty { i{content:"\";/*" "*/}}@m; @import 'winie55.css';/*";} }/* */ ↑上記のソースを記述したら、winie55.cssという名前でCSSファイルを作ります。 winie55.cssにWinIE5.5表示上の修正したい箇所のセレクタ、プロパティ、値を書き込んで保存します。 IE5.5で表示させてみて、何度か修正を繰り返します。 ↓【MacIE5.xのCSSハック】 /*\*//*/ @import "macie5.css" ; /**/ ↑上記のソースを記述したら、macie5.cssという名前でCSSファイルを作ります。 以下、WinIE5.5のCSSハックと手順は同じです。
- pchan0022000
- ベストアンサー率42% (112/261)
コードで書いた方が間違いがないのでコードで書きますけど。 ------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .c1 { background-image:url(test.jpg); height: 6px; width: 6px; background-color: #006666; font-size:2px; } --> </style></head> <body> <div class="c1"></div> </body></html> ------------------------------------------- こんな感じですか？ MS風に言えばフォントの高さよりも小さくできない「仕様」なのでは？
- pchan0022000
- ベストアンサー率42% (112/261)
1. 記述の規則に則った方法による解決法を教えてください。 違いが少しの差であれば仕様のような気もしますが。 コードを提示して頂ければなんらかの回答ができるかもしれません。 2. この IE の挙動は明らかに異常だと思うのですが、なぜ改善されないのでしょう。 MS否定派に言わせると「IEが圧倒的シェアをもっているのだから、IEに合わせたサイトを作らせてブラウザシェア争いで他ブラウザを締め出すため」とも言われそうですね。 実際のところは私は分かりませんが、下位互換性のためかもしれませんし、CSSにきちんと対応しだしたのって他ブラウザも最近ですよね？単に開発が追いついてない、上層部のGOサインが出ないだけかもしれませんし。もしわざと他ブラウザとの互換性をなくしているとしてもMSが自社がもっとも利益が出る選択をするのは企業戦略として間違っていないでしょうし。賛同できなければ他ブラウザを使えばいいのでは？と考えています。 私的にはIE7でW3Cの仕様にどれだけ準拠できているのかな？と様子見の段階です。
補足
どんな条件で IE においておかしな表示となるのか検証しはじめています: ひとつは、高さが 16 画素未満の指定のボックスにおいて、(当然) その高さ未満の背景 (インライン挿入ではありません) 画像を指定すると、画像表示繰り返しの指定の有無に関わらず、ボックスの高さが 16 で表示されてしまいます。再現性があります。まずはこれを何とかしたいです (どうしても画像は背景である必要があります)。
補足
結論から申しますと、解決しませんでした。 下記さまざまな方法を使うと 2px までは縮まりますが、幅や高さが 1px のボックスを作ることはできませんでした (お断りですが、問題は最初の表記とは微妙に違っています)。 もっとも、そのうち、テキストを 1 あるいは 0px にする方法は何か邪道で嫌ですが (実際には 1px のテキストなど入れないので、そういうことはしたくないのです)。 IE がマイナな UA なら IE を無視しようかとも思いますが、現実には最もメジャなウェブブラウザです。 ここで不思議に思うのは、区切り線などを幅、もしくは高さ 1px の背景画像の繰り返しで表現する人はいないのかということです。 「背景そのものを 1px にしなくても方法はある」などの意見はあると思いますが、問題があまり騒がれずに放置されているのが不思議です。