3

IEで丸めるために、pie.htcを含む丸みを帯びた角のdivを非表示にして表示する必要があります。しかし、私が使用display:none;したとき、そしてdisplay:block;最初に表示されたときに最初に表示されなかった場所では、正しく表示されませんでした。

私はこの小さな問題をvisibilityではなくを使用して上書きしましdisplayたが、他の問題は表示と可視性の両方に現れます。hrefのリンクをクリックしてからクリックして、角が丸いdivを表示/非表示にすると、スタイルなしで表示されます

これは実例です

[コンテナを表示]、[コンテナを非表示]の順にクリックすると問題なく動作しますが、アラートとリンクしている[ここをクリック（アラートリンクのみ）]をクリックすると、[コンテナを表示]をクリックします。例として、背景なしでdivのコンテンツを表示します（これはIE8でテストされたとおりです）。

CSS3Pieサイトのタブデモから始まる別の例

4

3 に答える 3

3

それはPIE.htcと再描画に関係しているようですので、ブラウザを再描画させないのはどうでしょうか。divを邪魔にならない場所に移動してから、もう一度元に戻してください。

<script type="text/javascript">
$(document).ready (function () {
    $('#show_div').bind ('click', function () {
            // show it by returning it to it's default position
        $('#tab_container_3').css ( {position : 'static'} );
    });
    $('#hide_div').bind ('click', function () {
            // hide it again by making it read the z-index
        $('#tab_container_3').css ( {position: 'relative'} );                       
    });
});
</script>

このCSSを次のように変更します。

#tab_container_3{
   position: relative;
   top: -9999px;
}

それは邪魔にならないように移動しているだけです。jQueryでpositiontoを変更すると、デフォルトに戻ります。aが付いている要素は、を受け入れないため、変更する必要はありません。staticapositionstaticz-index

更新しました

アクセシビリティ（またはそうでない）情報に従って

コンテンツにアクセスできないようにするための防弾方法はdisplay: block、visibility: hidden一緒に使用することですが、上記の問題については、すでに指摘されているように、動作で<li>はなく親自体を非表示にすることをお勧めし<a>ます。今回はクラスを追加および削除することでそれを行いました

これは機能しているようです：

$(document).ready (function () {

    // to make tab hidden and inaccessible onload
    $('#tab_container_3').parent().addClass("element-invisible");
    
    $('#show_div').bind ('click', function () {
        $('#tab_container_3').parent().removeClass ("element-invisible");       
    });
    $('#hide_div').bind ('click', function () {
          $('#tab_container_3').parent().addClass ("element-invisible");                            
    });
});

このクラスがCSSに追加されました（追加のCSS#tab_container_3は不要になりました）

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  visibility: hidden;
  display: none;
}

FFでCTRL+Fをテストしましたが、非表示のタブが見つかりません

このメソッドでは最初の3つのポジショニングとクリップのルールは必要ないと思います。最初にそれらを試しましたがa、IEで効果を完全にトリミングしなかったため、クラスを親liに移動しました。ルールを残して、私が試したことを示します-ルールが何であるか疑問に思っている場合に備えて;）

三度目のラッキー

this time I tried a combination, first loading the parent li off the page with negative z-index, the setting up a delay so that 0.5 seconds later it hides and corrects the z-index, the theory here was trying to make PIE.htc draw the corners before hididng them, I figured nobody will be searching the content within 0.5secs ;) - it's not totally smooth in IE but I think it's because of the positioning of the effects PIE.htc uses to draw the corners and shadows, but the effect does draw now, I tried slide down to reveal the div as that seems to "hide" the worst of IE's jaggy reveal

$(document).ready (function () {

    // to make tab hidden but accessible onload, accessible at first to allow link to draw, then hide it after 0.5 seconds  
    $('#tab_container_3').parent().css('top','-9999px').delay(500).hide('fast', function() {$(this).css({'top' : '0px'});});
                          
    $('#show_div').bind ('click', function () {
        $('#tab_container_3').parent().slideDown(200);       
    });
    $('#hide_div').bind ('click', function () {
          $('#tab_container_3').parent().hide(100);                            
    });
});
于 2011-03-26T14:49:20.523 に答える
1

IE7またはIE8で表示すると、css3pieによって作成された角の丸いタブが私のページにあります。次に、jquery は現在のクラスを選択したタブに追加します。これにより、タブの色が変わるか、強調表示されます。ただし、ページの読み込み時に色は変わりません。タブの上にカーソルを置いた後にのみ、色の変化が表示されます。クラスとスタイルは最初から存在しますが、どういうわけか、背景画像である色を更新または更新しません。これは、jquery が新しいクラスを追加する前に実行されている css3pie が原因である可能性があります。jquery クラスが追加されると、css3pie は変更のレンダリングまたは背景イメージの更新を忘れます。クラスの変更を有効にするには、どういうわけか要素を更新する必要があります。

このソリューションは私にとってはうまくいきました。

    //check if the current URL matches the href path of the tab
    if (strURL == baseHrefPath) {
        //remove any previously highlighted tabs
        $(".tabs li.current a").removeClass("current");
        //highlight the matching tab (li)
        $(this).parent().addClass("current");

        //this is a hack for IE7 and IE8 which use css3pie for rounded corners
        //issue: the jquery adds the class after the css3pie runs, thus the change is not displayed
        //the selected tab is not changing color properly in IE7 and IE8
        //solution: add any inline style (i.e. color white) to the element
        //this basically forces the element to refresh so the new styles take effect
        //thus highlighting the current tab
        $(".tabs li.current a").css("color","white"); 
    }

インライン スタイル (つまり、白) を要素に追加するだけで、基本的に要素が強制的に更新されます。したがって、選択したタブの色が変わります。

于 2012-09-16T03:11:19.253 に答える
1

同様の問題がありました。

背景は次のとおりです。

ページ上の 2 つのボタンを切り替えています。一方が非表示の場合、もう一方が表示されます。一方をクリックすると非表示になり、もう一方が表示されます。

ユーザーが最初にボタンをクリックすると、それは非表示になりますが、他のボタンは本当に奇妙に表示されます (背景は左にずらして表示されますが、テキストは正しい位置にあります)。これは初回のみ発生し、その後のすべてのクリック/トランジションは正常に機能します。

解決：

表示/非表示にjqueryのトグルを使用していますが、他のトランジションでも機能すると確信しています。 表示elされている要素です。

$(el).toggle(0, function() {       
                     if ($.browser.msie) {
                         $(this).each(function() { $(this).resize(); }); 
                     }
                });

サイズ変更によって要素がリフレッシュされるだけで、その後は正しく描画されます!

于 2011-06-03T15:01:18.597 に答える