ITを表現する

いつものように、IEとこの1つはIE癖のトップ10にランクなければならない多くの奇妙な問題の一つ。

問題文（これは私の問題だった、多分あなたは同じような不正動作があります）：
私は多くのDIVは、ページ上のセクションの何もタイトルはありませんクラス "sectionhead"のページである必要があります。 だから私はこのようないくつかのスタイルを探しています

。sectionhead {フォントサイズ：18pxの;背景：＃cfcfcf;パディング：5pxの;}

divは、いくつかの黒のテキストとライトグレーのバーです。 何がIEで発生するこれらのセクションヘッダーの一部が[OK]表示されますが、、、ページをスクロールしたりするときに、ページの下には "ALT"キーをクリックしたときにいつかは消える傾向にあるなどのページで何かをクリックするまで、いくつかは、見えないされていまたはスクロールバーでスクロールします。 彼らは時々あなたが（F5）ページをリロードしたときに再度表示されているようだ。 私はいくつかのシンプルなスタイルと短い完全にシンプルなDIVはBADに動作します。
何がそのような不安定な動作を引き起こすだろうか？ よく！ 率直に言って、NO IDEA！

可能な解決策：
再び私に理由を尋ねるが、多くのインスタンスでこの問題はポジション追加したときに消滅する傾向がありません。このように、要素のスタイルを動作MISに相対的に

。sectionhead {フォントサイズ：18pxの;背景：＃cfcfcf;パディング：5pxの。位置：相対}

不気味ですが何を言うの？ 神はIEから私を祝福！

と似たような問題を抱えていた場合、米国と共有して。

わずかライトのときには、Googleを見つけることができ、それは存在しないこと。 私が見つけた物のほとんどの問題は、それらが皆、1つまたはjQuery、プロトタイプ、MooToolsのと同類のような他の重量のJavaScriptフレームワークを使用するように見えたということでした。 彼らはすべてのクールで見てしゃれています。 しかし、あなたの要件である" しかし、私は私のサイトの場合は単純で軽量なライトボックスのスクリプトを使用したい "場合は、ここにある。

このライトボックスの気の利いた機能

1. 非常に軽い
   。 パックされたスクリプトの4キロバイト（8キロバイトはアンパック）
   B。 CSSの2キロバイト
   C。 物コンテナのHTMLに数行の
2. 理解し、実装するのが簡単
3. 同じページに複数のライトを持つことができます。
4. 同じ物コンテナがクリックされたリンク/オプションに応じて、（別ページに隠された部門として含まれている）、さまざまなコンテンツを表示するために使用されています。
5. 自動的にページスクロール量と物の内容の高さは、考慮などのウィンドウの高さと幅（画面解像度）など、すべての要因を取って、自身を中心
6. IE 7＆FFでテスト

デモを見る |
ライトボックスのダウンロードソースの郵便番号（1804回ダウンロードされる）

jo.js、jo_pack.js [パックバージョン]： -要素は、ウィンドウやドキュメントの位置決めスクリプトを含むJavaScriptオブジェクトの単純なセット[JO]、。 あなたには、いくつかの高度なJavascriptingを持つ手が汚れて取得したいのであれば、抽象的な機能は、拡張要素のプロパティなどを作成し、JO.JSを開くことができます。 Javascriptingであなたはあまりされていない場合は、単独でそれを残す。

lightbox.js、lightbox_pack.js [パックバージョン]： -ライトボックスマネージャのスクリプトが含まれています。 ページ上でライトを実装するのにも責任を負いページデザイナーである場合、あなたはLightBoxManagerを理解する必要があります。 LightBoxManagerは基本的には2つの関数showLightBoxとcloseLightBoxが含まれています。

lightbox.css： -あなたがCSSを知っていれば、あなたはルック·アンド·フィールlightbox.cssをカスタマイズするには、lightbox.cssで遊ぶことができ

index.htmlの 2つの異なるコンテンツを持つ物のサンプル実装

lb_underlay_bkg.png： - [建築が開いている間は、アンダーレイは、ページ上の他のエンティティをクリックしてからユーザーを防ぐことができlighbox、下の層である]これは、ライトの下敷きの背景を使用されているシミ/光透明なイメージです。 ページのデザインと要件に応じて、さらに任意のイメージまたはこの目的のためにソリッドカラーを使用することができます。

icon_lb_close.gif： -ライトボックスの右上のcloseライトハンドルのイメージ。 デザインごとに、任意の画像を使用することができます

デモを見る |
ライトボックスのダウンロードソースの郵便番号（1804回ダウンロードされる）

私たちはあなたのコメントやフィードバックを持たせてください...

このポストは "卵を吸うために教育おばあちゃん"というフレーズの良い例かもしれない...これは単なる基本的なCSSの原料である原因。 しかし、これらのために、気づかない私のように、これは不幸中の幸いかもしれません。 私はいつも（私はこれを言うための私の仕事を失う可能性があります）、それは静的なHTMLページのコンテンツの一部を維持するためにのみ可能だと思ったすべてのこれらの科学を行う、いくつかのスマートなスクリプトを使用して、（つまり、その位置など、ウィンドウのスクロールに、ISのまま）計算はWindow.scrollイベントをトラップし、タイムアウトなどを設定し、動的な位置を見つけるために

それはこのような単純なことができるとは思わなかった.... ここで、以下のCSS / HTMLで、私は4つの静的ブロック、ページの各extrimitiesに固定し1、上、右、下と左の...不必要な言うことを持っている...ことを必要とする場合には、いずれか1つ以上を選択することができます...

CSS
静的{表示：ブロック;のz-index：10;色：＃000000;オーバーフロー×：隠された;オーバーフロー-Y：隠された;位置：ixed。
}
＃内容{マージン：100pxに875 0px 160px;国境：1px固体＃e6e6e6}

＃ラップT {トップ：0px;背景：＃33CC66;幅：100％;高さ：55ピクセル;}

＃ラップ-L {トップ：80px;背景：＃FF9966;高さ：300pxの、幅：875、国境：固体＃e6e6e6 2PX;}

＃ラップは、-b {下：0px;背景：＃3333CC;幅：100％;高さ：55ピクセル;}

＃ラップ-R {トップ：80px;背景：＃6666FF;高さ：300pxの、幅：140px;ボーダー：＃e6e6e6固体2PX、右：0;}

HTML
<divのid="contents">あなたのメインページの内容</ DIV>
<div id="wrap-b" class="static">
ページ下部の静的コンテンツ
</ DIV>
<div id="wrap-t" class="static">
このページのトップに静的コンテンツ
</ DIV>

<div id="wrap-l" class="static">
ページの左側の静的コンテンツ
</ DIV>
<div id="wrap-r" class="static">
ページの右側の静的コンテンツ
</ DIV>

ここでwrokingサンプルを見る

何度も我々には、ブラウザspecficハックを（それが良い習慣ではありませんが、我々のUI開発者は、戦争が休戦になる偉大なブラウザになるまでそのような弊害に頼らなければならない）記述する必要を感じています。 以前、私はこの資料に記載していただけにIEの方法のみ<IE7 IEブラウザに表示されるであろうCSSのスニペットを書き込むには、。

昨日、私はいくつかのFirefox固有のCSSのスニペットを書きたかったケースを持っていた。 よく！ 私はこのためのCSSコードがあるかどうか分かりませんが、HTMLがある。 もののキャッチありますが 、HTML鞭のこの部分は、HTMLの検証を渡します。 しかし、anywaz！ あなたがひどく、またはのようなスタックされている場合は、検証のための無よろしく（いつか私たちは残酷なことする必要があります）がありません、あなたはFFのみスタイルシートへのリンクを宣言するには、次を使用するかだけでも、このブロック内のCSSをコーディングすることができます。 コー​​ドは

<COMMENT>ここにFirefoxのみHTML / CSS /スクリプトを入れて</コメント>

例えば、
<COMMENT>
<STYLE>
/ * FFのスタイルのみ* /
fieldset要素{国境：1px固体＃DDDDDD;}
</ STYLE>
</コメント>

私は "一瞬メートル幸せ...

まあ！ 以前の記事に戻ってIE8の不透明度については数日、私は"IE 8 strictモードではCSSの不透明度を許可しない "という重要な点に言及し忘れていました。
私は、strictモードで意味を理解donot人のために、 ここで簡単なチュートリアルです 。

これには回避策は（IE開発チームは、彼らがいくつかの不透明度と、ポップアップボックスを使用してWebサイトでは、世界中の再作業のルーチンへの道を開いていて、戻って不透明度をサポートして置くことを実現する前に）を使用することです半透明の画像...好ましくは、PNG形式の（私は彼らがになっていたとして、透明なGIF画像が動作するようになって悪い経験を持っていた）。 あなたの好きな画像エディタで、好きな透明の色と割合のPNGイメージを作成し、建築オーバーレイの背景イメージとして使用することができます。

すなわち
代わりにこのような何かの

。lighbox_overlay {
背景色：＃000000;
のz-index：1001;
の-moz-不透明度：0.6;
不透明度：0.60;
フィルタ：アルファ（不透明度= 60）;
}

これを行う....

。lighbox_overlay {
背景：URL（bkg.png）の繰り返し。
}

それを試して、ここをクリック！ | ダウンロードする、ここをクリック！

あなたはIE8でこのページを表示している場合、あなたはこの記事の後ろに完全に不透明な白色の背景を見なければなりません。 私が変更ゆっくりと着実に適応した人々の一人として、昨日、私の同僚は私（にこれを指摘した...特にブラウザは、言うイム臆病者が、そう、それは.... UI開発れている可能性があり、私はいつも私新しいバージョンのブラウザを怖がってくそ...あなたは右、約tlakingイム知っている？）

何、それを修正する解決策を見つけるとしようとすると、しばらくの間、周りに掘っ...
この時間は私たちのALL TIME回お気に入りブラウザは、CSSの不透明度のすべてのサポートをドロップすることで、もう一度上にそれを行っている。 非標準の `フィルタ：アルファ（不透明度=＃＃）` CSS属性がニース、削除されますが、彼らはまた、完全にCSS3不透明度をサポートする（他のすべてのブラウザがうまくそれを保持しているしているかのような）を追加するのを忘れています。 神はCSSの不透明度（IE 5.0以降、私が推測する）について語ってくれたので、そこで、初めて、ウェブブラウザは、CSSの不透明度をサポートしていません。
そして今、上にクリームのために：IE 8チームからの公式の単語？ それは"我々はIEの将来のバージョンではこの点を考慮する" "デザインによって"だと。

PS：それはきちんと見える誓う、FFでこのページをお試しください！

私は別にリストにこの記事を読んで" のどの絶対配置
エリック·ソルで "、私は感動よりも少ないものでした。 私も原因となる、すぎなかった落ち込んでいた、正直なところ私は思っていた、なぜ私はこのように素晴らしい何かを思い付く傾ける。

通常、我々は、CSSレイアウトを作成するときに、私たちは "POSITION"または "フロート"、またはその両方の非常に悪いを組み合わせて使用​​します。 エリック·ソルと彼のチームは、彼らは列の存在をシミュレートします偽もの列技法の後に" のどの絶対位置 "として洗礼をしているCSSレイアウトテクニック、新しいタイプの完璧なテクニックの隣に定義されています。

あなたがその問題を知っているCSSの開発者たちのすべてが崩壊のレイアウト（私たちはフロートレイアウトを使用する場合は、ラップして列全体を引き起こす予期しないコンテンツの変更）を持っている...まあ！ 歴史ですね！！
それは国連書かれた標準になる前に、このレイアウト技術は、まだ非常に若いですし、そこにすべてのこれらのCSSの教祖によってゴミ箱する必要があります。 私は今それを使用することが幸せなんだよ！ ...そして、すでにFAPのレイアウトに私の以前の問題/浮動小数点非必ずしもレイアウトを変換するの真ん中に既にです...と言うことをうれしく思います" 我々は、既に同様に、このブログサイトにフォークス絶対配置を使用している " ...今、それを試してみてGO！

名声エリック！

あなたが今まで（または1を作る）リスト項目（li）タグやCSSを使って垂直方向のメニューを行った場合は、発生する可能性がある、Internet Explorerでは、ブロックレベル要素を含むリストアイテムの間IE 6を挿入し、これらのギャップ、でこれはまだ別のバグマークアップ内のリスト項目の間に空白がある場合、すなわち。 ありがとう、でもおかげで、IEのバージョン7は、このバグから解放さそうです。
私、および多くのように、あなたはまだあまりにもIE6での作業、新しいレイアウトを取得する必要がありイライラし、開発者のこのバンドに属している場合、これは役立つかもしれません。 を見て...

サンプルマークアップ ：

<ul id="menu">
<li> <a href="#">トップページ</ a> </ LI>
<li> <a href="#">について</ a> </ LI>
<li> <a href="#">サービス</ a> </ LI>
<li> <a href="#">ポートフォリオ</ a>した</ li>
<li> <a href="#">に関するよくある質問</ a> </ LI>
<li> <a href="#">お問い合わせ</ a> </ LI>
</ UL>

あなたは、垂直メニューに上記のマークアップをtransfromするために、以下のような、いくつかのCSSを作成することができます....

サンプルCSS ...
＃メニュー{
マージン：0;パディング：0;背景：＃FF9900;
リストスタイルのタイプ：なし;幅：875;
}
＃メニューのLi {マージン：0;パディング：0;}
＃メニュー{表示：ブロック;
色：＃555555;
テキスト装飾：なし;
パディング：0 15px;
行の高さ：2.5;国境底：1px固体＃FFF;
}

あなたが表示されます。結果...

このバグの解決策...（太字のイタリック体でCSSを変更/追加されました）

＃メニュー{
マージン：0;パディング：0;背景：＃FF9900;リストスタイルのタイプ：なし;幅：875;
フロート：左; / *これはフロートのリスト項目が含まれています* /
}
＃メニューのLi {
マージン：0;パディング：0;
フロート：左; / *この修正* /
幅：100％; / IE6の*空白のバグ* /
}
＃メニュー{
表示：ブロック;色：＃555555;
テキスト装飾：なし;
パディング：0 15px;
行の高さ：2.5;国境底：1px固体＃FFF;
}

上記ソリューションの鞭は...（IE6のみに知られている理由で）動作するように見える代わりにこのメソッドをしようとした場合

ちょうどあなたのマークアップには、この追加IE6だけのスタイルを追加...

<！ - [LT IE 7の場合>
<style type="text/css">
＃メニューのLi 1 {表示：インラインブロック;}
＃メニューのLi 1 {表示：ブロック;}
</ STYLE>
<[endifの] - >

トップでスタイルシートを置く

あなたはページが徐々にロードする場合は、、我々はできるだけ早く持ってどのようなコンテンツを表示するようにブラウザをしたい、つまり、文書のHEAD内のページの上部にCSSを入れた。 これは、ページがこのページのプログレッシブレンダリングを容易に、より速くロードされたように見えます。 これは、大量のコンテンツを持つページに対して、低速のインターネット接続上のユーザにとって特に重要です。

それは全体的なユーザーエクスペリエンスを向上させることが文書化された事実、それは、進行状況インジケータと視覚的なフィードバックを提供することが重要です。 IE、CSSが完全にロードされるまで、ページのレンダリングブロックを含む彼らのスタイルを変更すると、一部のブラウザ、場合場合には、ページの要素を再描画する必要がなくなります。 このため、ユーザーは見になる 空白のページを参照してください。

W3 HTML仕様 "にも、CSSは、HTMLページのHEADセクションに私を含める必要があることを述べています。 at the bottom of the page, so it's best not to use it.また、IEでは、次の点に注意して@import使用した場合と同じ動作をする<link>ページの下部にあるので、それを使用しないことをお勧めします。

ブラウザ固有の機能を使用して避ける

フィルタ：フィルタの使用 メモリ消費量が増加し、要素ごとに適用され、イメージではなく当たり、問題が乗算されますので。 また、フィルタはIE独自のものであり、それ故に他のブラウザで意図したとおりに動作しません。 あなたは、透明やグラデーション背景を使用する場合は、画像で1画素を使用しています。
式：CSSの表現は、CSSで持っている便利な機能ですが、まだIE固有の機能です。 また、これらの式であることに注意することが重要です。 ページがレンダリングとサイズが変更されたときに評価され、スクロールして、ユーザーがページ上にマウスを移動した場合であっても。 これがあなたのページのパフォーマンスに影響を与える可能性は言うまでもない。 あなたはその長所は "その短所より多くの重量を量る"と感じない限り、それゆえ簡単な言葉で、CSSの表現を使用することは避けてください

あなたのCSSをExternalise

外部CSSを使用してのロードが高速になります ページのJavaScriptとCSSファイルがブラウザによってキャッシュされるためです。 インラインCSSはHTML文書にHTML文書が要求されるたびにダウンロードされる。 これは実際に行われたHTTP要求の数を減らすかもしれないが、その後、HTMLドキュメントのサイズが大きくなります。 外部CSSはブラウザによってキャッシュされます。HTMLドキュメントのサイズは、HTTPリクエストの数を増やすことなく削減されます。

あなたのサイト上のユーザーがセッションごとに複数のページビューを持っていて、ページを再使用するのと同じスクリプトとスタイルシートの多くの場合、キャッシュされた外部ファイルからより多くの潜在的な利点がありますのでご注意ください。

CSSファイルをパックする

梱包したり、CSSを演算処理すると、ロード時間を改善することにより、そのサイズを小さくするためのコードから不要な文字を削除する方法です。

CSSはすべてのコメントと空白のような不要な文字、改行などを削除することで、私クランチできます。

IE 6を掲示、MSIEは、他のほとんどの標準的なブラウザに標準的な少数のより多くのCSSプロパティを追加することによって、私達のUI開発者に親切にされています。 "最小の高さ" 1つのそのような有用プロパティです。 ない長いったらしい説明を必要としない非常にまっすぐ進むプロパティです。 コンテンツその家は、それが保持できるよりも少ないと重要なのは（プレーンバニラ"高さ"プロパティとは異なります）のスケールを占めているか、CSSの言葉で、それは同じように動作したときに分割の最小の高さが設定されている場合、それは常に、そのセットの高さを保持その"高さ" "auto"に設定されている部門...

また、IE6で動作しなければならない、まだコードのCSSに必要とされるいくつかの私たちの貧しい人々 、開発者は、 " 最小の高さ "の非可用性は、いつかショーストッパーを証明することができました... Donotの絶望を。

幸いなことに、我々は外の利点に使用して、私たちの目標を達成するために介して我々の方法をハックしたいIEの十分な癖を持っている...つまり、IE6でその分の高さかのように事業部部門を作る

解決策1：ハック[アンダースコアを使用して...続きを読むを ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML： -
<div class="box1">Some dynamic content with variable height ...</div>

---

解決策2：CSSの属性セレクタハックを使用して

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML： -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


CSSの属性セレクタハックは、ブラウザが以前股関節IE6はatributeセレクタを無視して事実を利用しています。 クラス= "みえ"の別のコンテナ部門の要件に注意してください。 ただ、この部門のクラス属性の臨場感は、Opera、MozillaとMSIE7の自動およびそれ以降に戻って高さを上書きします。 atributeセレクタをサポートしていないIE6は、それを無視します。

IE6のmin-heightのハックのデモを見る