HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
![IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd0dbd2b439f50b0a8cc90f9907f73a0d8c341e6/height=288;version=1;width=512/http%3A%2F%2Fdevelo.org%2Fimg%2Fog.gif)
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
Internet Explorer 8(IE8)ではレイアウトに大きな影響を与えるfloat関連のバグが修正され、Firefoxなどのブラウザと同じ形でページを表示できるようになった。ここでは、floatプロパティが適用された要素を「フロート要素」と呼び、どのような問題が修正されたのかを確認していきたい。 なお、サンプルではIE8の互換表示ボタンを利用して、IE8とIE7のStandardsモード(標準準拠モード)で表示を比較していく。Standardsモードや互換表示ボタンについては第2回「IE8のレンダリングモードと互換表示」の記事を参照してほしい。 1. ボックスの高さの算出からフロート要素が除外されない問題 フロート要素を含むボックスの大きさは、フロート要素を除外して算出することになっている。しかし、古いIEではボックスに横幅や高さが指定してあると、フロート要素を含めて算出してしま
「オブジェクトを指定してください。」 たまにIEで出てくるエラーメッセージです。 通常であれば関数が定義されていないなどの原因が一番考えられるのですが、関数が定義されているにもかかわらずこれが出てくる事があります。 しかも、FireFoxでは問題なく動いていてIEでだけエラーが表示されるので、わけがわかりません いろいろ試してみると、わかるのですが明らかにIEに限ってheadタグ内で書いている、javascriptが読み込まれていないというのがわかりました。 ここまでくるとなんとなくわかるんですけど、文字コードの設定をしてあげないとうまく読み込まれないらしいのです。そこで、<script>タグの属性にcharset="Shift-JIS"という感じで書いてあげると問題が解決されました。 ※ここで設定している文字コードはjsファイルの文字コードに合わせる必要があります
XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。 とは言ったもののIE6のバグを改めて見てみると多い・・・多すぎるよ!逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。 今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。 2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。 ちなみにこの種類分けも厳密ではないのであしからず。 ボックスモデル maring
出現条件を説明するのが難しい。IE6はfloatを指定した要素の親要素にwidth属性を指定するとfloatした要素の高さが親要素に含まれるバグがあります(詳しくはIEでfloat属性を指定した要素の親要素のborderが消えるバグを見て下さい)。このバグが発生している場合に、float属性を指定した子要素が兄要素に指定されているmargin-bottomを継承するみたい。 実際には兄弟要素の属性を継承することはないと思いますが、継承しているとしか思えない挙動です。 IE6でfloatした要素が兄要素のmarginを継承(?)する例 親要素が“parent”、その子要素で“child1”、“child2”、“child3”。“child2”、“child3”は margin-bottom:0;を指定しているにも関わらず下に余白が発生。このスクリーンショットのソース 最後にfloatを指
IEで指定どおりのfont-sizeにならない 2008-05-18 0 0 XHTML/CSS CSS, font-size IE との兼ね合いで,font-size は%で指定しておくのが,いちばん無難だと思うのですが,IE6, 7 にちょっと痛いバグがありました。 小さなサイズの文字が指定どおりの大きさにならないのです。 11px以下のフォントが指定より大きくなる まず,font-size のページを IE6 または IE7 でご覧ください。 順にフォントサイズが小さくなっていくはずなのですが,74%から72%あたりの日本語のフォントサイズが一旦大きくなっています。その後71%から 60%のところまで,日本語フォントはサイズが変わっていません。 FIrefox の場合と比べると,よく分かるかもしれません。 %で指定された font-size は,最終的にpxに変換され,端数処理して整
CSSの:first-letterの記述でIEが落ちる 個人運営のブログのHTMLのマークアップを書き換えた際に見舞われたトラブル。 Firefox 2,3/Safari 3/Opera 9.5/IE 7,6,5.5,5.0/MacIE 5.2 で検証したのだが、スタンドアローン版IE6.0でだけコーディングしたページを開くとIEが強制終了する現象が発生。Microsoft Virtual PC 2007 SP1のゲストOSにインストールされている通常版のIE6は問題なかったので気が付かなかったのだ。スタンドアローンだから仕方ないのか...細かい一部のリビジョンでは発生するのかもしれない。 デザインが崩れるのはまだしも、ソフトがいきなり落ちるのはさすがによろしくない。まず何が原因なのか調べてみた。 HTML の記述におかしな所がないか調べる。文法チェックもかけてみたが問題ない模様。
今日、cssでカラムをfloatさせている際に、驚きの出来事がありました。 IEで親の幅に合わせてピタピタに左右のカラムのwidthを設定すると、レイアウトが崩れる…ってのはよくあることですが、なんと、そんなわけでもないのにレイアウトが崩れたのです。 原因を探しても探しても、どーーーー頑張っても見つからず…。 だって、ピタピタにしたわけじゃないんですもの。余裕がある上に、leftとrightで分けたんですもの。 そこで、最後の手段的なものとして、アテで入れていた<img src="#" alt="*******" />のalt部分を削除してみました。altだけ適当に長いものを入れてたんです。 するとどーーーでしょーーー! レイアウトが直った…。 ま、まさかこのaltがジャマをしてくださっていたとは…。 こんな作り方をされる方はめったにいないでしょうが、もし、IEでfloatした時にレイ
Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"MS Pゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"MS Pゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで
これには泣かされた。 firefoxの場合 IE6の場合 上の図のIE6の場合のところの下の方に”している内容物右”というのがある。 なにこれ? そしてよくよく調べてみるとこれはhtmlでのコメントアウトによるバグらしい。 フロートしているタグとタグとの間に<!--コメントアウト-->をいれるとこういうバグがたまにおこる。これがたちの悪いことに解消法が<!--コメントアウト-->を消すしかないというのだ。他にあるという人は是非教えてほしい! サンプルを作ったのでとりあえずIE6で見てほしい。 サンプル
修正済みバグ一覧 以下の一覧は、IE7で修正されたバグである。IE6以下では問題が発生する。 バグ 関連タグ/プロパティ 症状 リンク XML宣言によって表示モードが変わる問題 <?xml?> XML宣言の記述があるとQuirksモード(下位互換モード)で表示される。 解説: beta2 02-01 / 問題回避: 正式版 03-03 文字より小さな高さ指定が無効になる問題 height 要素に指定した高さが内包する文字より小さい場合、高さの指定が無効になる。 解説: beta2 03-01 / 問題回避: 正式版 03-03 置換要素を含む行の高さが変わる問題 line-height 画像などの置換要素を含む行で、ブロック要素に対して指定したline-heightプロパティの値が無効となる。 解説: beta2 03-03 / 問題回避: 正式版 03-04 背景画像の閲覧領域に対する固
『CSSバグ辞典スレッド』の要約 ここは、2ちゃんねるweb制作管理板内のCSS/DHTMLのバグを扱うスレッドで挙げられた、各ユーザエージェントのCSSやDHTMLの実装上のバグをまとめているサイトです。 更新履歴 WinIE171, 172、NN031、Opera091を追加。WinIE151を修正。(2004-11-29) WinIE169, 170、Moz085を追加。WinIE030, 039、Moz070、Opera048を修正。(2004-10-09) NN029, NN030、Moz084を追加。Moz033を修正。(2004-08-23) WinIE168、Moz082, 083を追加。WinIE022, 166を修正。(2004-08-08) Moz081、Opera090、Safari022, 023を追加。(2004-07-26) 以前の履歴 本拠地スレッド CSS
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く