jQuery的外观/在火狐但不是IE浏览器（Internet Explorer）

问题描述：

我有jCarousel 0.2.8在我的Drupal 7模块完美地在Firefox中使用jQuery 1.7.1和jQuery UI 1.8.11。但是，传送带在Internet Explorer 7,8,9和10中无法正常工作。如何让它们在两个浏览器中正确加载，我该怎么做？附上FF和IE中的样子截图。以下是我的JavaScript/jQuery代码。请注意，由于它是Drupal站点，因此使用jQuery（）而不是$（）。jQuery的外观/在火狐但不是IE浏览器（Internet Explorer）

您可以测试在我的网站上描述的问题： [演示链接删除]

任何帮助，得到这个固定的IE将非常感谢！谢谢！！

Firefox and IE screenshots

function select_avatar(image, button) { 
image.input.prop('checked', true); 

jQuery('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" }); 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if(jQuery(this).attr("src") == src) 
     jQuery(this).addClass("avatar_select"); 
     else 
     jQuery(this).removeClass("avatar_select"); 
    } 
); 
} 

function unselect_avatar(image, button) { 

image.input.prop('checked', false); 

//select empty 
jQuery('#default_input_'+image.id).prop('checked', true); 

jQuery('#layer_'+image.id).css({ backgroundImage: "none" }); 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if(jQuery(this).attr("src") == src) 
     jQuery(this).removeClass("avatar_select"); 
    } 
); 
} 

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) { 
// carousel.data is empty on page load 
var data = carousel.data; 

// True on page load 
if(!data) { 
    // cid is name of carousel, user_avatar_select_X 
    var cid = carousel.list.attr('id').substring(9); 
    var data = new Array(); 

    // For each img element in ID user_avatar_select_X 
    jQuery('#'+cid+' img').each(
     // Provide index # for each iteration of loop 
     function(index) { 
      // Sets input to the input element nearby the img element 
      // Note: Parent element is a label element 
      var input = jQuery(this).parent().siblings('input'); 
      // Sets url to the src of the img element 
      var url = jQuery(this).attr('src'); 

      // If the img is selected, apply the img to ID layer_user_avatar_select_X 
      // (which is on the picture) 
      if(input.is(':checked')) { 
        jQuery('#layer_'+cid).css({ backgroundImage: "url("+url+")" });     
      } 

      // Adds variables to the data array 
      data.push({id: cid, input: input, image: jQuery(this), url: url}); 
     }); 

    // Stores data array in carousel 
    carousel.data = data; 

    // Adds html to ID user-edit 
    // Adds input with ID default_input_user_avatar_select_X 
    // and name select_avatar_X 
    jQuery('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>'); 
} 

var idx = carousel.index(i, data.length); 
var image = data[idx - 1]; 

var img = image.image.clone(); 

if(image.input.is(':checked')) 
    img.addClass("avatar_select"); 

carousel.add(i, img); 

img.hover(
    function(){jQuery(this).addClass("avatar_hover");}, 
    function(){jQuery(this).removeClass("avatar_hover");} 
); 

img.click(
    function() { 
     if(image.input.is(':checked')) 
      unselect_avatar(image, jQuery(this)); 
     else 
      select_avatar(image, jQuery(this)); 
    } 
); 
}; 

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) { 
carousel.remove(i); 
}; 

function mycarousel_init(list) { 
// list parameter is ID user_avatar_select_X radio buttons and images 
// If list isn't valid, bail out 
if(!list.attr('id')) 
    return; 

// Add layer to picture for each list (ccrresponding to the choices for avatars) 
jQuery(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>'); 

// Adds UL carousel_X with Tango Skin to each list 
list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>'); 

// Creates carousel for each list 
jQuery('#carousel_'+list.attr('id')).jcarousel({ 
    scroll: 3, 
    visible: 3, 
    wrap: 'circular', 
    //itemLoadCallback: itemLoadCallbackFunction, 
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, 
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback} 
}); 
} 

jQuery(document).ready(function() { 
// Hide original ID user_avatar_select_X radio buttons and images 
// since we want them to be in carousels instead 
jQuery('div.user_avatar_select').parent().hide(); 

for(var i=0;i<10;i++) { 
    // Create a carousel based on ID user_avatar_select_X 
    mycarousel_init(jQuery('#user_avatars_select_'+i)); 
} 

// Hide the picture with ID current, since the user may want to build a new avatar 
jQuery(".picture #current").css({display: "none"}); 

// Show the default avatar, so the user can build a new avatar 
// Selected layers for the current avatar will be added on top 
jQuery(".picture").css({"position": "relative", "width": "200px", "height": "199px", "background-image": "url(/sites/default/files/default_avatar.gif)"}); 
});

答

在CSS我设置一个特定的高度和宽度在圆盘传送带的图像和固定它。他们有高度：汽车，但这不足以IE我猜。

jQuery的外观/在火狐但不是IE浏览器（Internet Explorer）

相关推荐