IE6_jquery での jquery ベースの Colortip の情報プロンプト ボックス プラグインの表示の問題を修正する方法

今日改めてこのプラグインを見直してみたところ、IE6で動作させると表示がおかしくなり、先端がとんでもない位置に表示されることがよくありました。もう1つの問題は、ヒントの表示効果は画像を使用せず、すべて純粋なCSSであるため、CSSで実装された三角形はIE6では機能せず、色付きの領域が表示され、非常に見苦しいことです。それを変えたい。まずは比較写真を撮ってみましょう:

js コードにはまったく問題ありません。問題は CSS にあります。IE6 では、位置を指定するために問題が発生する可能性があります。また、IE6 は border-color:transparent 属性をサポートしていないため、先端の下の三角形にも問題があります。以下で修正してみましょう。
プラグインの colortip-1.0-jquery.css ファイルを開き、その中に次のコードを見つけます:

コードをコピーします コードは次のとおりです:

.pointyTip,.pointyTipShadow{
/* 0x0 div に太い透明な境界線を設定して三角形を作成します */
border:6pxソリッド透明;
_border: 6px ソリッド #123456; /*彩度フィルターを使用するために準備する特別なカラー値を指定します*/
bottom:-12px>height:0; %;
margin -left:-6px;
position:absolute;
font-size:0; /*IE の空のラベルには高さが設定されます。 0 にすると、この高さをクリアできます*/
_filter:chroma(color=#123456); /*IE6 の彩度フィルターを使用して、色 #123456 を透明にフィルターします*/
}

コードをコピー

コードは次のとおりです: .pointyTipShadow{ /* シャドウの先端は 1px 大きいため、先端への境界線として機能します */

border-width:7px

bottom:-14px; /* を微調整します。小さな三角形の位置 より正確になります*/
margin-left:-7px;
}
.colorTipContainer{
position:relative;
text-decoration:none ! important;
_zoom:1; /*理由はわかりませんが、zoom:1 をここに追加すると、IE6 では left:50% を使用して正しい位置を取得できるようになります。正確に表現できません...*/
}


はい、私のマシンでは、IEtester と VMware 仮想マシンを使用した XP IE6 テストに合格しました。効果を試すこともできます。ご質問がございましたら、フィードバックをいただければ修正させていただきます。コードは簡単に理解できるので、理解できない場合はプラグインを使用してください。


プラグイン Web サイト

|
改訂版デモ
|
修正されたプラグインのダウンロード オリジナルバージョンと高度なブラウザでの修正されたデモの効果は同じであり、違いはありませんが、IE6 で試してみるとわかることを付け加えておきます。私が行ったこの些細な作業が、このプラグインを好む友人の利便性をもたらすことを願っています ^_^ 三角形効果を実現するための純粋な CSS 方法については、Think It 氏のこの記事を参照してください。非常に詳細で優れた CSS テクニックです。丸い背景と三角形です。