【CSS】CSSレイアウト時のIE6対策まとめ | バシャログ。
Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。 世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。 ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。 今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。 基本ですが、おさらいまで。 大前提 大前提として、IE6 は標準準拠モード
IE6対応・cssのみでマウスオーバー時に噴出しも実装するナビゲーションKntL-Pager
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーションを実装可能です。 KntL Pager うーん、凄い。これでcssオンリーとは驚きでした。一応ページネーション（ページ送り）のcssとして紹介されていますが、普通にユーザビリティを意識したナビゲーションとして使えそうですね。 対応ブラウザはIE6以上、Firefox1以上、chrome、opera、safariに対応との事。日本語に直してHTMLをアップしてみましたので[sexy-lightbox href=’http://kachibito.net/wp-content/uploads/2010
[CSS]ハック無しでIE6でmax-widthを実現するスタイルシート
CSS HackもJavaScriptもIEの条件付きコメントも無しで、IE6でmax-widthを実現するスタイルシートをCSSplayから紹介します。 'max-width' for Internet Explorer IE6 demo: center 実装のポイントとなるのは左右に配置されたdiv要素で、それぞれマイナスマージンを指定します。 コンテンツを配置するdiv要素には「overflow:hidden;」を指定します。 デモでは上記のmax-widthのコンテンツをセンターに配置したものと左右に配置したものがあります。 'max-width' centered 'max-width' left 'max-width' right
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
jmblog.jp - Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ
http://jmblog.jp/archives/180より。 Bruno Fassino氏のIE/Win: Disappearing position:absolute boxes near to floats and clears のテストを元にしています。 日本語 | English 概要 Win/IEでは、以下の場合に絶対配置（position: absolute）にしたボックスがレンダリングされないことがある。 position:absolute が float と hasLayout をもつ clear の直前に存在する場合。（Test1） 解決方法 : #1, #2, #3, #4, #5 position:absolute が float と hasLayout をもつ clear との間に存在する場合。（Test2） 解決方法 : #1, #2, #3
position:absoluteにしたときにIEで位置がずれることの対応 - まんぞうブログ
jqueryプラグインgalleriaをホームページに使ってみようと、サンプルからちょろちょろ修正してた。Firefoxで動作確認とかして最後にIEでチェックすると表示がおかしいぞと気づく。position:absoluteにしているのに位置がおかしい。 IEのバグらしい。 to-R『floatした際に背景が消える件(IE編)』（参照） IEに対して対応するには以下のような方法があります。 width:100%を指定する 親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。 親要素にwidth:100%を指定したら、ちゃんと表示された。
JavaScript による、IE 6/IE 7 の判別/判定について。 | 犬面犬。邦楽・洋楽・インスト音楽情報、批評その他。
JavaScript による、IE 6/IE 7 の判別/判定について。 2008/06/23 00:32 JavaScript による、IE 6/IE 7 の判別/判定について。 たった 1行で、Internet Explorer （以下 IE と略す） のヴァージョンが 6 か、7 以上かを判定する JavaScript 命令として、 if (typeof document.body.style.maxHeight != "undefined") { // IE 7.0 以上 または Gecko などモダンブラウザー } else { // IE 6.0 以下 } が有用だ、という記述が各所にある。ところが、これ、大きな弱点があることに最近気付いた。 body.style なので、当然、body タグが現れるまでは使えない。ところが、多くの JavaScript 命令は、head 内に
IEのhasLayoutをtrueにした時に起こる不具合を回避する | バシャログ。 - WEB制作
以前のエントリー：IEのhasLayoutをtrueにした時に起こる不具合の続きです。 前回は IE の様々な CSS のバグは hasLayout という IE 独自プロパティを true にすることで回避ができるものの、今度は hasLayout が true の時にのみ起こる別のバグが発生してしまう、というエントリーでした。 今回は hasLayout の値を true にした要素を false に戻す方法をご紹介します。 * { zoom: 1; } 上記のようにユニバーサルセレクタに「zoom:1」を指定すると、全ての要素の hasLayout プロパティが true になります。 これにより IE の CSS バグがかなり解消されますが、ul や ol のリストマークが消えてしまうなど別の不具合が起こります。 この不具合を回避するために、以下の記述で ul, ol, li それ
Heavymetalcafe | Notebook: アンカーを:hover状態にすると親ブロックの高さ/マージンが変化するバグ
私はCSSコーディング中にIEでプレビューすると、a:hoverで上下マージン(margin,padding)が変わることがよくある。 これには以下のような条件があるようだ。 条件1: 3重以上の入れ子ブロックになっている。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 最も内側のブロックに任意の上下マージンを設定している。 内側から2番目のブロックに背景とボーダーを設定している。 内側から3番目のブロックに任意の幅を設定している。 条件2: 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 内側から2番目のブロックに任意の上下マージンを設定している。内側から2番目のブロックまたはそれより内側にある要素に背景を設定している。内側から3番目のブロッ
RedLine Magazine : IE6 → 透過PNG+overflow=混ぜるな危険（追記有）
IE6 → 透過PNG+overflow=混ぜるな危険（追記有） >>081205：追記 解決しました (追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか？？コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。 やりたかった事 親ボックスには大きめの写真を入れたい。 その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。 その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。 そのテキスト本文部分は
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
めも - IT戦記
このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自分のサイズや位置に責任を持つ要素である。 layout を持つ要素は、四角形の領域を作る。 layout を持たない要素は、直近の layout を持つ要素のサイズおよび位置と、そこの間にあるすべての要素の margin, padding, border によってその開始点、折り返し点が決まる。 layout を持たない要素は、四角形の領域を作らない。上下左右の間隔を保持しているだけに過ぎない。 layout を持たない要素間の上下マージン（相殺されるマージン）は二つの要素間の共有のもので、ある要素特
リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」 | Igaloglog
IE6のバグで通称「いないいないばあバグ」というものがあります。日本語訳しない状態で「peek-a-boo bug」。 リロードしたり、スクロールしたりすると、CSSで指定したborderやbackgrund-imageが出たり消えたりする、というバグです。 というか、基本状態で表示されていなくて、リロード、スクロールで出たり消えたりする、のほうが正しいんでしょうか。 「いないいないばあバグ」とは言いえて妙の、訳の分からんバグです。こういうの誰が命名したんでしょうね。 いないいないばあバグの対処法としては、 問題の出る要素を囲っている div に line-height を指定する。 問題の出る要素に width または height を指定する。 問題の出る要素の中の要素に position:relative を指定する。 の3つの方法があるようです。他にもあるかもしれませんが、と
IE での Google Maps API (groundwalker.com)
自分が普段 Firefox なものだから，ページ作ったときにはまず，Firefox (しかも on Mac)で確認して，おーけー，とか思ってしまうけど，一般的には IE on Win なわけです。いやいや確認してみると javascript まわりでやっぱりエラーがでてたりしてデバッグしたり，ぐぐったりするはめになる。 で，今回 Google Maps API 関連での注意事項 for IE を覚え書きとしてまとめてみたりする。 onloadを使う body中に google map の初期化コードを書いて実行させると，たとえ Firefox ではまともに表示されても，IEではエラーになる場合がある。エラーになる場合とならない場合があるようだが，どこぞの情報によれば，<div></div>等のブロック要素がネストしているような場合，エラーが発生しやすいようだ。 で，結局のところ，初期化コー
IEで絶対配置（absolute）のボックスの中身がずれる (Happy Swing)
先日、仕事でHTML4.01 Transitional＋CSSでコーディングしていたところ、position:absolutを指定したボックスの中にある要素が、Windows IE6でズレて（飛び出て？）表示されるというバグがありました。 3つのボックスに「position:relative」をかけて、その子要素をabsoluteしてたんですよ。で、3つのボックスを横並びにしたかったので「float:left」をかけてみたら・・・なんと！3つ目のボックスの中の子要素の最後の一つが、CSSが外れたかのように左下に表示されちゃったんです。 どんな感じかというと、 こんな感じ。これが、IEだけで起こるんです。FirefoxやらOperaはオッケー。意味不明。 ためしに、枠外に飛び出てしまう要素に「border」を入れてみたけど、フツーに本来あるべき場所に枠が。でも、中身は左下。・・・なんじゃこ
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://tetlist.info/2009/02/positionrelative_border_intern
http://hpbuilder.net/weblog/2007/08/06203819.html