目前我正在用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%;
}