bxslider在chrome上正常工作但在firefox上,HTML正在消失

时间:2014-02-22 08:47:27

标签: jquery internet-explorer mozilla bxslider

目前我正在实现一个带有ajax生成li的bxslider。所有东西在chrome中工作正常,但在firefox中滑块内容正在消失。播放器,除了滑块内容之外的所有内容都出现在页面中但是滑块中的内容没有在页面上渲染。

你可以检查一下here。任何帮助都会被告知。

这是我的代码:

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;

            }
        }
    }       
});
 }

1 个答案:

答案 0 :(得分:0)

我在这里遇到了同样的问题,不知怎的,我发现在bx-wrapper类下的jquery.bxslider.css中,没有为滑块本身设置宽度,所以我添加了宽度: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%;
}