Question

我试图使用http://flexslider.woothemes.com/，它显示了一个相当熟悉的滑块/轮播Jquery库，但左/右箭头（上一个/下一个图像）未在Firefox中显示。

如果您访问http://flexslider.woothemes.com/，当您将鼠标悬停在图片上方时，会看到左右图标图像（箭头）。

要模拟此项，请下载zip并将其解压缩。 demo文件夹中有一个index.html。打开这个，你会看到问题;一切都有效，除了这个右箭头和左箭头。当我将鼠标悬停在滑块上时，它不会显示左/右图像

enter image description here

Firebug告诉我没有错误。

它在IE和Chrome中运行良好。

我浏览了HTML文件并检查了所有javascript / css / images等链接的工作情况，并且它们显示出来了。

我会假设他们不为任何人工作，如果是这样的话，我该怎样做才能获得左/右小箭头？

修改

根据评论

如果文档包含US-ASCII范围之外的字符，则文档将在某些浏览器配置中使用乱码文本进行渲染。必须在文档或传输协议中声明页面的字符编码

我的HTML代码是（我在美国范围之外看不到任何ASCII字符）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

    <title>Testing</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">


    <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <!-- Demo CSS -->
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

    <!-- Modernizr -->
  <script src="js/modernizr.js"></script>


  <!-- FlexSlider -->
  <!-- interseting use of defer, whcih means it wont' start until the page has loaded!!-->
  <script defer src="js/jquery.flexslider-min.js"></script>



</head>
<body>


<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide"
    });
});
</script>

<div style="width:650px; height:500px;">
 <div class="flexslider">
<ul class="slides">
<li >
    <img src="images/slide4.jpg" />
</li>
<li>
    <img src="images/slide2.jpg" />
</li>
<li>
    <img src="images/slide3.jpg" />
</li>
<li>
    <img src="images/slide3.jpg" />
</li>
</ul>
</div>
</div>


</body>
</html>

Answer 1

问题在于此行中的flexslider.css

@font-face {
font-family: 'flexslider-icon';
src:url('fonts/flexslider-icon.eot');
src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
    url('fonts/flexslider-icon.woff') format('woff'),
    url('fonts/flexslider-icon.ttf') format('truetype'),
    url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;

}

检查文件夹字体的位置。

Answer 2

我似乎总是在使用Jquery，但通常有一种方法可行。不要下载他们下载的内容，而是在他们的页面上查看工作示例，并直接复制引用。

EG，打开所有CSS文件，并手动保存，图像和JS文件相同

只要我重新保存CSS文件并找到丢失的图形，它就会按预期工作。我不知道为什么/如何在其他浏览器中工作。

Answer 3

在我的情况下，当您在Web Developer Tools中查看控制台时，它与您在Firefox中看到的错误有关。

看错误。

13：35：17.415可下载字体：下载失败（font-family：＆＃34; flexslider-icon＆＃34;样式：正常权重：正常拉伸：正常src索引：2）：错误的URI或跨站点访问不允许来源：文件：my / local / paht / demo / fonts / webfonts / flexslider-icon.ttf1 demo.css：51：12

一旦你的服务器上有你的所有文件就可以了。

离线/本地查看是个问题（仅限FireFox）。

无法使FlexSlider在FireFox中工作

3 个答案: