bxslider在Chrome上工作正常,但在Firefox上,HTML正在消失



目前我正在用ajax生成的li实现一个bxslider。在 chrome 中一切正常,但在 Firefox 滑块中内容正在消失。这意味着,除滑块内容之外的所有内容都显示在页面中,但滑块中的内容不会呈现在页面上。

你可以检查它 这里 .任何帮助都将得到赞赏。

这是我的代码:

function loadPage(file_name_url, url_data, typ) {   
      var items = [];
      var page_content = $("#page-content");
$('#loading').css('visibility','visible');  
$.ajax({
    type: "GET",
    url: file_name_url,
    data: url_data,
    dataType: "html",
    success: function(msg) {            
        if(parseInt(msg)!=0) {
            switch(typ) {
                case "category":                        
                    $('#page-content').html(msg);   
                    $('.bxslider').bxSlider({});
                    //$("#cate-page-content").hide();
                    $("#cate-page-content").animate({"top": "10%", "height":"auto"}, "slow");   
                    $(".title").css("position","relative"); 
                    $(".bx-controls").css("position","fixed");  

                    //bx-controls bx-has-pager bx-has-controls-direction
                    //$('#loading').css('visibility','hidden');                 
                break;
                case "article":
                    items.push(msg);
                    $("#page-content").html(msg);
                    $("#page-content").css("overflow: auto; overflow-y: hidden;");
                    $("#article-page-content").mCustomScrollbar({
                        scrollButtons:{
                            enable:true
                        }
                    });                                             
                    $("#article-page-content").animate({"left": "13%"}, "slow");
                    //$("#pageContent").show();     
                break;
            }
        }
    }       
});
 }

我在这里遇到了同样的问题,不知何故,我发现在 jquery.bxslider 中.css在 bx-wrapper 类下,没有为滑块本身设置宽度,所以我添加了 width:100%,它立即出现。这对我有用,希望有帮助。

.bx-wrapper {
position: relative;
margin: 0 auto 60px;
*zoom: 1;
display: block;
border:1px solid white;
overflow: hidden;
height: 470px;
border:1px solid green;
width: 100%;
}

最新更新