2009 2009年 11月 7

CSS ZOOM -もう一つのIEの癖、3ピクセルシフト

かんしゃくをスローすることによって、時間と繰り返した時、開発の精神のうち、すべてのW3Cの規則によって言われたとおりに動作するように見て、他のブラウザ、IEスパイラルあなたは、その修正プログラムを持っていないようです。 ちょうどそのような一つは、IE7でこの問題です。

問題文:
私など他の深刻なウェブ開発者の多くは、いくつかのリンク(アンカータグ)の上にカーソルを移動に、レイアウトでフロートがネストする場合、容器が右に数ピクセルシフトしているようだ、何度以上に気付いたかもしれません。 私はこの問題のためのGoogleのソリューションを試してみましたが、ほとんど理由に合理的な答えを見つけなかったし、それが発生したとき(起きてからこの問題を回避するのに役立つかもしれない)、それゆえ私はどちらかの問題に対する明確な解決策を見つけたことがない...

可能な解決策:
経験から、私はこの問題は、誤動作、コンテナのCSS定義にzoomプロパティを追加することによって固定されていること、すなわち時間の通知が90%パーセントを持っている...

 #somediv {
      ズーム:1;
 }

再び理由があいまいである...これを試して...
IEの一部の要素はデフォルトで"true"です"hasLayout"プロパティを持っています。 多くの視覚的なCSSの行動、例えば、アルファフィルタは、hasLayoutその要素上で動作します。 と{ズーム:1}はターゲット要素のhasLayoutプロパティを与えるようで .... 役に立つか? 私はそう思ういけない...

zoomプロパティはまた、クロームでサポートされているように思われますが、その使用DINTは、私のレイアウトに非常に悪影響を及ぼすように見える...それはあなたのために働く場合は、それを試して...それがない場合は、 "CSSのクラップス"の下にこのページをブックマーク


2009 2009年3 22

SevenUp! IE6を取り除くために世界を奨励!

Googleは...運動プロンプト人はIE6ダンプするために...ページのロード時にPOPUPと盗聴IE6ユーザによって開始されます非常に良いアイデアではありませんかもしれません...しかし、UIの開発者である、私はこのバンドワゴンを結合する必要があります...私のための1以下のブラウザが心配ごめん利己的なそれはある! 私はこのjavascriptを含むました...(IE6でこのページをTRY)...
ヘイ! と明るい調子で...それは、JavaScriptのPOWERの表示です参照してください。.... それも巨人をダウンさせることができます(または、かつてそれがあった)

SO ... javascriptの1行でIE6の世界を取り除く助けて!

http://code.google.com/p/sevenup/


2008 2008年 12月 17

IE8の誤動作:CSSレイアウトの破損(IE8のMETAタグを使用してブラウザのバージョンを対象)

あなたは、CSSの方であれば、クロスブラウザの作業、レイアウトを得ることに痛みを知っているだろう。 IE8はまだ私達の開発のための作品内の別のスパナです。 Anywaz! 私はあなたの完璧な作業IE7のCSS(およびそれ以前)とFirefoxが突然IE8でかんしゃくを投げ始めた昨日、行ったようにあなたは、この問題にヒットした場合、次を試してみてください...それは素敵な瞬間のための私の問題を解決するように見えた....

META宣言を使用して、我々はIE8を使用したいレンダリングエンジンを指定することができます。 ので、IE8はIE7のようにレンダリングするために強制的に...あなたの文書の頭に次のメタタグを挿入します -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

デフォルトではIEのメタは次のようになります -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
これは、IE8の新しい標準モードを使用してページをレンダリングすることになります。

必要な場合は、この構文は、以下のように、他のブラウザのために収容するために使用することができます。

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />


DOCTYPESについての詳細:

あなたはまだ "DOCTYPE"と呼ばれる動物の種類に精通していない場合は...ここにいくつかの簡単な読み取りです。
DOCTYPESは何ですか? BROWSERの癖&STRICTモードは何ですか?
XSLにDOCTYPEを設定する

DOCTYPES約深さを理解する上で詳細については、これらのリンクを訪問してみてください...
List Apartの:右DOCTYPEを使用してサイトを修正!
別にリスト:DOCTYPEを越えて:Web標準、前方互換性、およびIE8

注:しかし私たちの多くはHTML / CSSの人が右のDOCTYPEを設定すると、私たちの文書にDOCTYPE declerationの重要性を無視されているが、通常、ほとんどのクロスブラウザの問題への答えです。


2008 2008年 10 10

だけでなく、IEの場合- CSSの子供セレクタIEで動作しません。

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 ;}

既にこれらの前に見ていない場合は、同様に次のように目を通しを持っている


2008 2008年 10月 4

インターネットでは消えてHTML / DIV要素エクスプローラー[IE]

いつものように、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から私を祝福!

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


2008 2008年 7月 15

IE 8のstrictモードとCSSの不透明度...回避策

まあ! 以前の記事に戻って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)の繰り返し。
}

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


2008 2008年 7 6

IE8には"不透明ません"

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

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

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


2008 2008年 6月 20

IE6でライン/リスト項目のホワイトスペースのバグ(LI)

あなたが今まで(または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の] - >


2008 2008年4 12

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のハックのデモを見る



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エレメント、スクリプトや頭痛の負荷を加えた。 私もこのソリューションを使用して、あなたがこのオプションを使用して任意の助けを必要とするならば、私に知らせてください。 助けて喜んでいるでしょう!


NDKホーム | ITを表現 | 表現口蓋 | Penmenshipを表現 | 表現する素晴らしい | 自分を表現