QuickSand 脚本在 IE 7 中未正确显示答案

【问题标题】：QuickSand Script not showing correctly in IE 7QuickSand 脚本在 IE 7 中未正确显示
【发布时间】：2012-05-28 16:44:12
【问题描述】：

我的网站上有一个经过编辑的流沙版本，它可以在所有浏览器上正确显示，或者至少在 chrome Opera 和 firefox 上显示。但是，在 IE 上我遇到 css 问题。当我使用静态版本时，即使在 IE 上也能正确显示 css，并没有更改任何 css，只是添加了流沙效果，但它确实弄乱了显示，尽管所有动画都很好。请访问这个网站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 上的显示方式，在其他浏览器上的屏幕截图是关于这个问题的 cmets：感谢任何帮助.. 我是 jquery 及其插件的新手，有时语法让我感到困惑......

【问题讨论】：

这里是屏幕截图的 URL。i48.tinypic.com/10yj9c6.jpg
这里工作正常，除了圆角..
@gabriel Santos，你用的是哪个版本的IE？？
IE9.08 与开发者工具（从 F12 按钮）模拟 IE7 浏览器。可能是这个问题。
哦，我明白了，我有实际的 IE 7，我猜这就是原因

标签： jquery css quicksand

【解决方案1】：

您用于 正文部分 的 line-height 太小，这会剪裁标题部分 图库图片 的风格化字体文本强>。

在您的自定义styleie.css 文件中更改高度值，如下所示：

line-height:2.12em

出于某种奇怪的原因，IE 要求它比标准 CSS 文件中使用的相同值更大。如果需要，检查父元素是否影响这些子元素。

编辑： 上面的 line-height 毕竟不需要改变。在同一行中有一个错字：

display:inline:block;

改成：

display:inline-block;

【讨论】：