我的网站上有一个编辑过的流沙版本,它在所有浏览器或至少Chrome opera和firefox上都能正确显示。但是,在IE上我得到了css问题。当我使用静态版本时css在IE上显示正确,没有改变任何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上的显示方式和其他截图浏览器是关于这个问题的评论:感谢任何帮助..我是jquery及其插件的新手,有时语法让我感到困惑......
答案 0 :(得分:1)
正文部分所使用的行高太小,无法剪切为标题部分看到的风格化字体文字图库强>
在自定义styleie.css
文件中,更改高度值,如下所示:
line-height:2.12em
由于一些奇怪的原因,IE要求它比标准CSS文件中使用的相同值更大。如果需要,检查父元素是否影响这些子元素。
编辑:毕竟不需要更改上面的行高。在同一行是一个拼写错误:
display:inline:block;
将其更改为:
display:inline-block;