0

ウェブサイトに流砂の編集バージョンがあります。すべてのブラウザ、または少なくともChromeOperaとFirefoxで正しく表示されます。ただし、IEではcssの問題が発生します。私が静的バージョンを使用していたとき、CSSはIEでも正しく表示され、流砂効果を追加しただけでCSSを変更しませんでしたが、すべてのアニメーションはうまく機能しますが、表示が混乱しました..このWebサイトにアクセスしてくださいhttp：// www .jonathansconstruction.com/galleryie.php流砂コードは次のとおりです。

$(document).ready(function(){

var items = $('.photo_show figure'),
    itemsByTags = {};

// Looping though all the li items:

items.each(function(i){
    var elem = $(this),
        tags = elem.data('tags').split(',');

    // Adding a data-id attribute. Required by the Quicksand plugin:
    elem.attr('data-id',i);

    $.each(tags,function(key,value){

        // Removing extra whitespace:
        value = $.trim(value);

        if(!(value in itemsByTags)){
            // Create an empty array to hold this item:
            itemsByTags[value] = [];
        }

        // Each item is added to one array per tag:
        itemsByTags[value].push(elem);
    });

});

// Creating the "Everything" option in the menu:
createList('View All',items);

// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
    createList(k,v);
});

$('#gallery_menu nav a').live('click',function(e){
    var link = $(this);

    link.addClass('current').siblings().removeClass('current');

    // Using the Quicksand plugin to animate the li items.
    // It uses data('list') defined by our createList function:

    $('.photo_show').quicksand(link.data('list').find('figure'), function(){

adjustHeight = 'dynamic';
initLytebox();

       });
    e.preventDefault();
});

$('#gallery_menu nav a:first').click();

function createList(text,items){

    // This is a helper function that takes the
    // text of a menu button and array of li items

    // Creating an empty unordered list:
    var figure = $('<figure>',{'class':'hidden'});

    $.each(items,function(){
        // Creating a copy of each li item
        // and adding it to the list:

        $(this).clone().appendTo(figure);
    });

    figure.appendTo('.photo_show');

    // Creating a menu item. The unordered list is added
    // as a data parameter (available via .data('list'):

    var a = $('<a>',{
        html: text,
        href:'#',
        data: {list:figure}
    }).appendTo('#gallery_menu nav');
}
 });

上記のURLにアクセスして、IE 7などを確認してください。また、IEでどのように表示されるかを示すスクリーンショットを掲載しています。http： //i49.tinypic.com/25tj2bl.jpgにアクセスしてください。 IE7と他のブラウザのスクリーンショットは、この質問のコメントにあります：どんな助けでもありがたいです..私はjqueryとそのプラグインに不慣れで、時々構文が私を混乱させます...

4

1 に答える 1

1

本文セクションに使用している行の高さが小さすぎるため、タイトルセクションのギャラリー画像に表示される定型化されたフォントテキストがクリップされています。

カスタムstyleie.cssファイルで、高さの値を次のように変更します。

line-height:2.12em

奇妙な理由で、IEでは、標準のCSSファイルで使用されている同じ値と比較してこれを大きくする必要があります。必要に応じて、親要素がこれらの子要素に影響を与えているかどうかを確認します。

編集：上記の行の高さは、結局変更する必要はありません。その同じ行にタイプミスがありました：

display:inline:block;

次のように変更します。

display:inline-block;
于 2012-05-28T08:34:02.397 に答える