Firefox 不支持过渡

我正在尝试使我的网站浏览器兼容与图像悬停在图像上的过渡灰色兼容，并且在Chrome和Opera中起作用，但在Firefox中不行，我不知道为什么，因为我有Mozilla浏览器的浏览器特定代码。

这是我的代码（尽管您要查看的主要代码是IMG和IMG：CSS中的Hover）：

<!doctype html>
<html>
<head>
    <title>Basketball Uniforms 1/24/14</title>
    <style>
        * {
            margin: 0;
            font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
        }
        html { 
            background: url(assets/background.jpg) no-repeat center center fixed; 
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        header {
            width: cover;
            padding: 2em;
            background-color: rgba(17, 40, 87, 0.85);
            border-radius: 0 0 2em 2em;
        }
        h1 {
            text-align: center;
            vertical-align: middle;
            color: #FFBB00;
        }
        h2 {
            text-align: center;
            vertical-align: middle;
            color: #FFBB00;
        }
        h3 {
            text-align: center;
            vertical-align: middle;
            color: #FFBB00;
        }
        table {
            margin-left: auto;
            margin-right: auto;
            border-collapse: separate;
            border-spacing: 0 2em;
        }
        td {            
            border-style: groove;
            border-width: 2em;
            border-color: rgba(59, 59, 59, 0.95);
            border-radius: 4em;
            padding: 4em;
        }
        .odd {
            background-color: rgba(242, 153, 51, 0.80);
            color: #22499C;
        }
        .even {
            background-color: rgba(51, 112, 242, 0.80);
            color: #FEBB2D;
        }
        img {
            width: 26em;
            height: 20em;
            border-radius: 1em;
            transition: filter 1.5s ease;
            -ms-transition: -ms-filter 1.5s ease;
            -o-transition: -o-filter 1.5s ease;
            -webkit-transition: -webkit-filter 1.5s ease;
            -moz-transition: -moz-filter 1.5s ease;
        }
        img:hover {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: url(assets/grayscale.svg);
            filter: gray;
        }
        h4 {
            padding-top: 1em;
            text-align: center;
        }
        h5 {
            text-align: center;
        }
        footer {
            width: cover;
            padding: 2em;
            background-color: rgba(17, 40, 87, 0.85);
            border-radius: 2em 2em 0 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>Basketball Uniforms Through the Ages</h1>
        <h2>Leo Alfred&#58; 1/24/2013</h2>
    </header>
    <table>
        <tr>
            <td class="odd">
                <a href="http://uniformcritics.com/basketball/nba/portland-trail-blazers/1970-trail-blazers-debut-road-uniform-vintage-retro-throwback/">
                    <img src="assets/1970.jpg" title="1970&#39;s Basketball" alt="1970&#39;s Basketball">
                </a>
                <h4>Portland Trail Blazers</h4>
                <h5>1970 - 1971 Debut Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="even">
                <a href="http://uniformcritics.com/basketball/nba/golden-state-warriors/1980s-warriors-away-california-uniform-vintage-retro-throwback/">
                    <img src="assets/1980.jpg" title="1980&#39;s Basketball" alt="1980&#39;s Basketball">
                </a>
                <h4>Golden State Warriors</h4>
                <h5>1980 - 1985 Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="odd">
                <a href="http://uniformcritics.com/basketball/nba/milwaukee-bucks/1990s-bucks-road-uniform-throwback/">
                    <img src="assets/1990.jpg" title="1990&#39;s Basketball" alt="1990&#39;s Basketball">
                </a>
                <h4>Milwaukee Bucks</h4>
                <h5>1993 - 2005 Road Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="even">
                <a href="http://uniformcritics.com/basketball/nba/la-clippers/2000s-clippers-away-uniform-red/">
                    <img src="assets/2000.jpg" title="2000&#39;s Basketball" alt="2000&#39;s Basketball">
                </a>
                <h4>LA Clippers</h4>
                <h5>2000 - 2009 Away Uniform</h5>
            </td>
        </tr>
        <tr>
            <td class="odd">
                <a href="http://www.spartanjerseys.com/michigan-state-basketball-jersey/2010-2011/">
                    <img src="assets/2010.jpg" title="2010&#39;s Basketball" alt="2010&#39;s Basketball">
                </a>
                <h4>Michigan State Spartans</h4>
                <h5>2010-2011 Uniform</h5>
            </td>
        </tr>
    </table>
    <footer>
        <h2>An LFX Design Website</h2>
        <h3>&#169; 2014 LFX Design</h3>
    </footer>
</body>

我不知道发生了什么，因为我有：

-moz-transition: -moz-filter 1.5s ease;

和：

-moz-filter: grayscale(100%);

事先感谢您的帮助！

尝试使用此样式：

img:hover {
  -webkit-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");
}

Firefox（或Gecko而不是Gecko）当前不支持CSS过滤器，例如Blur，Greyscale等。

这是一个很棒的网站，它列出了所有浏览器中CSS过滤器的历史记录和当前支持，因此您可以在将其添加到网站之前先查看您要查看的浏览器支持。

http://caniuse.com/css-filters

这是关于Mozilla支持的帖子，人们提出了同样的问题，即Firefox何时将支持CSS过滤器：http：//support.mozilla.org/en-us/questions/972373

希望有帮助！

相关内容

最新更新

热门标签：