- 締切済み
IE が CSS で指定のボックスの大きさを無視
doublebeefcakeの回答
- 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ハックと手順は同じです。
関連するQ&A
- IE6に対応させたcssハックについて
cssベースでHPを構築しています。 ヘッダー、そしてメインブロックの中にレフトボックス、 ライトボックスを入れた２カラムです。 レフトボックスとライトボックスはフロートで調整しています。 ブロックにフロートを使うとIE6でマージンオートが適用されないという 話を聞き確認してみたところ、確かにIE7,ファイアーフォックスでは きちんと背景の真ん中にコンテンツが表示されているのですが、 IE6で見てみるとズレが生じています。 マージンオートが適用されず、左側にヘッダー、メインボックス全て くっついている状態です。 ハックを使うことがポイントのようなのですが、 IE6用にどのようにスタイルシートに記述すれば宜しいでしょうか？？ IE6しか読み込まない子供セレクタを使うというものもありましたが px指定してもパソコンの画面サイズでずれが生じるといったことは ないでしょうか？ cssに詳しい方宜しくお願い致します。
- 締切済み
- HTML
- CSS ボックスの高さ指定
例えば ▼html側 ------------------------------------------------------------- <div id="hako">あいうえおかきくけこさしすせそ</div> ------------------------------------------------------------- ▼css側 ------------------------------------------------------------- #hako{ width:500px; height:40px; } ------------------------------------------------------------- というソースで、あらかじめボックスの高さを指定しているとします。 この場合上記htmlの「あいうえお・・・」の部分の文量が多くなり テキストが2行3行となった場合、IEではその文量に応じてボックスの高さが伸びますが、 Firefoxではheight:40px;が不動のものになり、テキストがボックスの高さからあふれ出します。 これをFirefoxでもIEと同様にボックスの高さが可変するように出来ますか？ css側でheight指定をしなければ、IE,Firefox共に文量に応じて可変するのですが、 デフォルトで表示領域をある程度確保しておきたいのです。
- ベストアンサー
- ホームページ作成ソフト
- cssで指定した文字の大きさがIE6とIE7で違う
cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました（微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています）。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか？ ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。
- 締切済み
- HTML
- cssを用いてボックスを作りたいです。
cssを用いてボックスを作りたいのですが、うまくいかず困っています。 http://www.tagindex.com/stylesheet/box/width_height.html ↑内容はここの中段にある使用例から参照しました。 operaではきちんと表示されるのですが、safariでは文字のみの表示となり青色の領域が表示されません。 htmlタグはこれです。 <div id="contents"> <div class="box">横幅50%×高さ100px</div> </div> cssは下記です。 #contents div.box { width: 50%; height: 100px; background-color: #85b9e9; } ※ちなみに#contentsのwidthは770pxあります。 現在、dreamweaverの「ブラウザでプレビュー」で確認してるのですが、この方法が間違っているのでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- 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 box ieだけ中央寄せ出来ない
サイトを作っています。CSSのBOXを使って、メイン部分を構成しているのですが、IEだけ中央寄せされません。どのようにすれば解決できますか？できれば<div style="text-align:center">内容</div>は使いたくないです。 <style type="text/css"> <!-- body { background-color: #EEEEEE; } .mainbox{ width:900px; height:1000px; padding:6px 6px 2px 2px; border:8px; margin-left: auto; margin-right: auto; text-align:left; background-color:#bde9ba;} body { overflow: hidden; } --> </style> <div class="mainbox"> 内容 </div> 質問に関係ありませんがクローム、オペラ、モジラでは正常に表示できるのになぜIEだけはちゃんと働かないのでしょうか？ IE迷惑ですｗ
- ベストアンサー
- CSS
- box-shadowの質問です。
box-shadow: -webkit-box-shadow: -moz-box-shadow: chome Firefox opera safari はつくのですが でシャドウを付けているのですがIEだけがシャドウがつきません。 どうすればIEもシャドウがつくのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSのショートハンドの記述ルールについて
ショートハンドの記述方法について疑問が出たので質問します。 XHTMLのTransitionalで宣言しているファイルでの話です。 ex1 { border: #000000 1px; border-style: solid none; } ex2 { border-style: solid none; border: #000000 1px; } これをそれぞれ適当なボックスに指定すると、ex1は上下に線が、ex2はIE7で確認したところex1と同じ挙動でしたが、FirefoxやOperaでは全く線が表示されませんでした。 恐らくデフォルトのnoneがex2の場合は上書きされるのだろうということでこれは解決したのですが、ショートハンドの記述ルールに対して不安が出てきました。 どこか明確に記述してあるサイトはないかと探してみたのですが、どうにも自力では見つけることが出来ず、自分の記述に自信がもてずにいます。 ・ex1と同じ見た目のものを作成したい時、自分（回答者様）ならどう記述するか ・そう記述する根拠 を教えて頂ければと思います。 また、ショートハンドのルールについて詳しく解説しているサイトをもしご存知でしたら、教えて頂ければ幸いです。 よろしくお願いします。
- ベストアンサー
- CSS
- cssで凝った角丸ボックスを作りたい。
以下の条件を満たしたボックスをスタイルシートで作りたいのです。 ●ほぼ全てのブラウザに対応させたい。 ・化石のようなブラウザは結構ですが、 IE、FireFox、ネスケ、Operaには 崩れる事なく表示できるようにしたいです。 ●tableタグを使用したくない。 ・tableを使用せずにこのボックスを実現したいのです。 ●幅や高さは固定ではなく％で指定したい。 ・ブラウザのウィンドウサイズによって変化させたいのです。 ●角を丸く、その外側は透過させたい。 ・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、 丸くさせた角の外側を透過させる必要があります。 参照1はかなり近いイメージなのですが、 角丸の外側が透過していません。(bodyのカラーと同じ色にしている) ちなみにこれを透過させると上下のバックグラウンドカラーや 左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。 （参照1）http://www.sovavsiti.cz/css/corners.html ●左から右へとグラデーションをかけたい。 ・希望しているボックスがグラデーションの為、 参照2の黄色の縦線のように太くしたボーダーではできない。 （参照2）http://phrogz.net/CSS/roundcorner.html ●影を付けたい。 ・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。 ●画像はcssで表示させたい。 ・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、 cssでバックグラウンドカラーなどで表示させたいと思っています。 ※これは変更・妥協可。 ●ボックスの中には文字などが入ります。 調べても考えても糸口が見つかりません。 もしご存知でしたら是非教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- IE9でCSS3が機能しない
CSSセレクタについてお伺いします。 あるショッピングカートサイトを使っているのですが、このサイトはhtmlは編集できずCSSしか編集できないページがあります。 このページのデザインをなんとか編集したいと奮闘しています。 そのサイトのhtmlは不親切にもidやclassがほとんど記述されていません。 そのため:nth-child(n)などを使ってなんとか要素を編集できそうでした。 しかしfirefoxやchrome、operaはこの:nth-child(n)が機能するのですが IE9では機能しません。 IE9ではhtmlの宣言を<!DOCTYPE html>と記述しないとCSS3 は使えないのでしょうか？ CSS側だけでなんとかclassなどの指定がない要素を取得する方法はないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS