Question

主要问题如下。所有图片都显示为FireFox中的断开链接，并且在Safari，Opera和Chrome等其他浏览器中都可以使用。

然后我联系了支持人员，他们说，当涉及FireFox时，CSS已知问题。

这是我的CSS代码

      <head>
<title>My Booklet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
  html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
  }
  body {
    background-color: transparent;
    -moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform-style: preserve-3d;
  }
  .gwd-table-5il4 {
    background-image: none;
    -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    -moz-transform-style: preserve-3d;
  }
  .gwd-tr-qiqz {
    background-image: none;
  }

.fadein { position:relative; height:335px; width:223px; }
.fadein img { position:absolute; left:0; top:0; }
</style>

<script type="text/javascript">

function blink() {
    var blinks = document.getElementsByTagName('blink');
    for (var i = blinks.length - 1; i >= 0; i--) {
       var s = blinks[i];
      s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
    }
    window.setTimeout(blink, 700);
  }
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
  else if (window.addEventListener) window.addEventListener("load", blink, false);
  else if (window.attachEvent) window.attachEvent("onload", blink);
  else window.onload = blink;
</script>    

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-    child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

感谢您的任何帮助。

我添加了一些我正在使用的附加脚本。 HTML文件的其余部分是表格，图像和URL的基本html标记。

此致

Answer 1

-webkit是Chrome和Safari的前缀，它对Firefox没有任何影响。 Firefox one -moz

尝试添加-moz前缀，如：

/* Chrome and Safari */
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;

/* Firefox */
-moz-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-moz-transform-style: preserve-3d;

/* Other */
transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-style: preserve-3d;

编辑：不添加Volvox指出的前缀属性

Answer 2

对于firefox

Add properties with -moz too 

-webkit is only for chrome and safari

例如

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;

Answer 3

webkit是针对谷歌浏览器和safari，firefox不明白这一点。它使用-moz .... 喜欢 - moz-border-radius 你必须检查firefox是否可以支持这些功能。

Answer 4

第一个孩子有一个空间。否则它可以工作

旧

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-    child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

新

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

http://jsfiddle.net/nZFnS/

CSS在FireFox中不起作用

4 个答案:

旧

新