2008 2008年 10月 10 日
IE以外のブラウザのCSS：CSSの開発者へのないニュースその、下の例のようなCSSの子供セレクタは、IEで動作するようには思えない。
例えば、div要素を意味する>スパン{いくつかのCSS}、 "span要素は、分割要素の子要素（およびNOT孫または偉大な孫など）であるとき"。
しかし、我々の利点にこのCONを使用していました。 歴史的に、子セレクタがIEからCSSコマンドを隠すために使用されています。 単に置くことによってhtml>body任意のCSSコマンド IE の前でそれを無視します。
html>body .foo { CSS commands go here ;}
この作品のため<body>いつもの子である<html> -それはもちろんの孫やひ孫にすることはできません<html> 。
現在IE 7は子セレクタを理解することは、大なり記号の直後に空のコメントタグを挿入する必要がIE 7は、このセレクタを理解しません（なぜ知っている人！）、したがって、完全にこのCSSコマンドを無視します。
html> /**/ body .foo { CSS commands go here ;}
既にこれらの前に見ていない場合は、同様に次のように目を通しを持っている
コメントなし |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 |に掲載されないブラウザの癖 、 CSS
2008 2008年 10月 4 日
いつものように、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から私を祝福！
と似たような問題を抱えていた場合、米国と共有して。
コメントはありません |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 |に投稿されたブラウザの癖 、 CSS 、 HTML
2008 2008年 7月 15 日
まあ！ 以前の記事に戻って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）の繰り返し。
}
それを試して、ここをクリック！ | ダウンロードする、ここをクリック！
コメントはありません |タグ： IEのバグ 、 IEの修正 、 IEの問題 、 IE8 |に投稿されたブラウザの癖 、 CSS
2008 2008年 7 月 6 日
あなたはIE8でこのページを表示している場合、あなたはこの記事の後ろに完全に不透明な白色の背景を見なければなりません。 私が変更ゆっくりと着実に適応した人々の一人として、昨日、私の同僚は私（にこれを指摘した...特にブラウザは、言うイム臆病者が、そう、それは.... UI開発れている可能性があり、私はいつも私新しいバージョンのブラウザを怖がってくそ...あなたは右、約tlakingイム知っている？）
何、それを修正する解決策を見つけるとしようとすると、しばらくの間、周りに掘っ...
この時間は私たちのALL TIME回お気に入りブラウザは、CSSの不透明度のすべてのサポートをドロップすることで、もう一度上にそれを行っている。 非標準の `フィルタ：アルファ（不透明度=＃＃）` CSS属性がニース、削除されますが、彼らはまた、完全にCSS3不透明度をサポートする（他のすべてのブラウザがうまくそれを保持しているしているかのような）を追加するのを忘れています。 神はCSSの不透明度（IE 5.0以降、私が推測する）について語ってくれたので、そこで、初めて、ウェブブラウザは、CSSの不透明度をサポートしていません。
そして今、上にクリームのために：IE 8チームからの公式の単語？ それは"我々はIEの将来のバージョンではこの点を考慮する" "デザインによって"だと。
PS：それはきちんと見える誓う、FFでこのページをお試しください！
コメントはありません |タグ： IEのバグ 、 IEの問題 、 IE8 |に投稿されたブラウザの癖 、 CSS
2008 2008年 6月 20 日
あなたが今まで（または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の] - >
コメントはありません |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 、 IE6 、 チュートリアル |に投稿されたブラウザの癖 、 CSS
2008 2008年4 月 12 日
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のハックのデモを見る
コメントはありません |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 、 IE6 、 チュートリアル |に投稿されたCSS
2008 2008年3 月 15 日
いくつかの場面で、ポップアップ部門/ライト/ヒントを使用してページレイアウトをしている間は、我々が何らかの形でSELECTオブジェクトが設計することにより、これらのPOPUP部門の下にあることを起こる、それが透けて状況に遭遇formula要素.... YUK！
よく！ 簡単にFFとIE7のために適切にZ-INDEX値を調整することによってこの問題を解決可能性があります。 しかし、グッド·オールド（しゃれ）IE6は意図したとおりに動作しません.... でも、あなたはポップアップ部にいくつかの大幅な高Z-INDEX値を適用した後、SELECT BOXショーを通じ、...がっかり！！
この問題に対する修正はありませんが、ありますが、私は信じて、この問題を回避するには、いくつかの方法よりも、しかし、のほとんどで、私のため正常に動作している、あなたに私が使用する最も簡単な解決策を教えてここでイム例....
"あなたがPOPUPを表示するときROUGE選択ボックスを隠す "
単にあなたのスクリプトのスニペットで、あなたのポップアップを表示する場合には、 "hidden"にSELECTボックスの可視性を設定するスクリプトの一部を追加する
のdocument.getElementById（ 'my_select'）style.visibilty = "隠された";
そして、あなたのポップアップ部門のCLOSEにそれをセットバックすることを忘れないでください
のdocument.getElementById（ 'my_select'）style.visibilty = "見える化"。
"my_select"は刺激選択ボックスのIDです。
この情報がお役に立てば幸いです...
PS。 動的にポップアップDIVの下にIFRAME（あなたポップアップと同じサイズ）をpositioniningようにofcourseの他のオプションがあります...これはあまりにも動作しますが、DOMエレメント、スクリプトや頭痛の負荷を加えた。 私もこのソリューションを使用して、あなたがこのオプションを使用して任意の助けを必要とするならば、私に知らせてください。 助けて喜んでいるでしょう！
コメント |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 、 IE6ません |に投稿されたブラウザの癖 、 CSS 、 HTML 、 JavasScript
2008 2008年 1 月 8 日
数ヶ月前に我々が唯一のIE6（に見えるであろうCSSの一部を含めることができますどのように見た自分のIEの場合のみ ）。 同様にこれを達成する方法は他にもあります。 単に、ターゲットIEに固有の独立したCSSが含まれています。 これは、条件付きコメントと呼ばれているものを達成することができます。
条件付きコメントは、ブラウザの種類とバージョンを検出する方法です。 ブラウザの検出は、コンテンツがブラウザの特定に提示されていることを確認するために実行されます。 ブラウザの検出は、多くの異なる技術を使用して行うことができます。 このメソッドは、javascriptを使用して、スタイルの切り替えが含まれて以前の方法に比べていくつかの利点があります。 であろう、重要ないくつかの一覧を表示するには、
どのように我々はこれを行うのですか？
IE 5で何かをするだけ
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
すべてのIEのバージョンで何かをする
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
新しいすべてのIEのバージョンで何かをしているIE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
複数の条件vartiationsについては、MSDNでこの情報をお読みください。
条件付きコメントについて
コメントはありません |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 |に投稿されたブラウザの癖 、 CSS 、 HTML 、 JavasScript
2007 2007年 9 月 8 日
あなたはしばらくの間、CSSを書いている場合は、あなたのCSSレイアウトは、すべての新しいブラウザ（私は後でIE6以上のブラウザを意味する）で正常に見えたが、IE 6は、かんしゃくをスローするときに、文字通り、あなたの髪を引っ張るそれらの時を経験する必要があります。 あなたのCSSを調整するために奮闘しかし、それは動作しません...まあ！ これらのハックを試してみてください...
1。 ハックを強調する-
定義では、CSS 2.1仕様では、CSSの識別子にアンダースコア（ "_"）ことができます。 しかし、多くのブラウザでは、まだいずれも下線が、IEを進めて識別し無視するように見える。 このIEのバグ/機能は、このように唯一のIEのCSSプロパティを設定するには、非常に明確な方法になります。 これは、Internet Explorer（すべてのバージョンがIE 7）の表示され 、 起動時にアンダースコアで書かれたCSSプロパティを覚えている
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}
ハックを強調するこのデモを見る
また、IE6のmin-heightのハックは、アンダースコアハックを使用して、 チェックアウト
2。 ハッシュ（＃）の刻み目： -
ハックを強調するように、この1つは良い違いが、あまりにもIEがOLYためのものですが、起動時に＃を前に、プロパティ識別子はすべてのIEバージョンの表示され、IE7は含まれており、他の標準的なブラウザには見えません。
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
このハックは、私たちの詳細を見つけるためにこの記事を見て、クロスブラウザ垂直整列ソリューションを実証するためによく使用されている
3。 IE6のCSSのみ： -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}
これらのハックは何も動作しない場合、送られた天ね...これらのハックのいずれかがいつかあなたの人生を保存すると、コーヒー:)に私を治療するために忘れない
コメントはありません |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 |に投稿されたブラウザの癖 、 CSS 、 JavasScript
2007 2007年 7月 12 日
私はあなたの除算（DIV）と、その部門でのmouseoverイベントがあった場合、いくつかの良い理由（それがあるのはマウスオーバーで画像の上にいくつかのタグを表示するために必要とされた私の場合と同様に、透明でなければなりませんでした、この問題を抱えていたこの透明分割）、IEはmouseoverイベント（FireFoxで問題なく動作）をトリガに失敗しました。
いくつかのオプションを試してみました...そのうちの多くはIEで起動するようにイベントを取得するだけで絶望的な試みであった。 私は仕事かもしれないと思った賢明なものは、いずれかの部門に背景色を設定し、ゼロに不透明度を設定することであった...まあ！ 仕事をDINT！
仕事と私は必要な機能を妨げないように見え、最終的な解決策は、その部門内の1つのピクセルの反復/透明な背景イメージを配置することであった
愚かな...！ しかし、今のIEは幸せだ。
コメント |タグ： IEのバグ 、 IEの修正 、 IEのハック 、 IEの問題 |に投稿されないブラウザの癖
