网站在 Firefox 中显示错误答案

【问题标题】：Website is displayed wrong in Firefox网站在 Firefox 中显示错误
【发布时间】：2015-12-03 10:05:16
【问题描述】：

我编写了一个网站，它运行良好。基本上我使用的是this FullPage Slider。一切正常，但在 Firefox 中不行。一个部分包含一个包含these 图像叠加悬停效果的表格。图像叠加库在 Firefox 中经过测试并且工作正常。但对我来说不是在 Firefox 中。

是时候编写一些代码了。

HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title class="uppercase">MY HOMEPAGE</title>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css" />
    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
    <link rel="stylesheet" type="text/css" href="../css/imagehovereffect.css" >
    <link rel="stylesheet" type="text/css" href="../css/basics.css" >
    <link rel="stylesheet" type="text/css" href="../css/menu.css" >
    <link rel="stylesheet" type="text/css" href="../css/popup.css" >
    <style>
/* Centered texts in each section
    * --------------------------------------- */
.section {
    text-align: center;
}
</style>

    <!-- js -->
    <script type="text/javascript" src="../js/vendor/jquery-1.9.1.min.js"></script>

    <script type="text/javascript" src="../js/fullpage/vendors/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="../js/fullpage/jquery.fullPage.js"></script>
    <script type="text/javascript" src="../js/fullpage/examples.js"></script>
    <script src="../js/imgLiquid-min.js"></script>
    <script src="../js/modernizr.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
                sectionsColor: ['#fff', '#fff', '#fff', '#fff'],
                navigation: true,
                navigationPosition: 'right',
                navigationTooltips: ['Intro', 'References', 'About', 'Contact']
            });

             if (Modernizr.touch) {
            // show the close overlay button
            $(".close-overlay").removeClass("hidden");
            // handle the adding of hover class when clicked
            $(".img").click(function(e){
                if (!$(this).hasClass("hover")) {
                    $(this).addClass("hover");
                }
            });
            // handle the closing of the overlay
            $(".close-overlay").click(function(e){
                e.preventDefault();
                e.stopPropagation();
                if ($(this).closest(".img").hasClass("hover")) {
                    $(this).closest(".img").removeClass("hover");
                }
            });
        } else {
            // handle the mouseenter functionality
            $(".img").mouseenter(function(){
                $(this).addClass("hover");
            })
            // handle the mouseleave functionality
            .mouseleave(function(){
                $(this).removeClass("hover");
            });
        }
        });

        $(document).ready(function() {
    $(".imgLiquidFill").imgLiquid();
});

        $(document).ready(function(){ $.fn.fullpage.reBuild() });
    </script>

    <noscript>
        <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ErrorPage.html">
    </noscript>

    </head>

<body>

 <a class="noDecorationLink" href="index.html"><img src="../img/Back_Button.png" alt="Back Button" class="backButton"></a>

 <div id="fullpage">

      <div class="section" id="section1">

        <table class="tableReferences">
            <tr class="row1">
                <td>
                    <table class="tableRow1">
                        <tr>
                            <td class="cell1">
                                <div class="referencesPic" style="background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>
                            </td>
                            <td class="cell2">

                               <div class="container">
                                <div class="demo num1">

                                <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Backgroundtext
                                            </td>
                                        </tr>

                                    </table>

                                </div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                hallo meine Freunde
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>

                            </td>
                            <td class="cell3">

                            <div class="container">
                                <div class="demo num1" style="background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Foregroundtext
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>


                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="row2">
                <td>
                    <table class="tableRow2">
                        <tr>
                            <td class="cell1">

                            <div class="container">
                                <div class="demo num1">

                                <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Background
                                            </td>
                                        </tr>

                                    </table>

                                </div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                hallo meine Freunde
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>

                            </td>
                            <td class="cell2">

                             <div class="container">
                                <div class="demo num1" style="background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand">

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Foregroundtext
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>

                            </td>
                            <td class="cell3">

                               <div class="referencesPic" style="background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr class="row3">
                <td>
                    <table class="tableRow3">
                        <tr>
                            <td class="cell1">

                                <div class="container">
                                <div class="demo num1" style="background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Foregroundtext
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>

                            </td>
                            <td class="cell2">

                            <div class="referencesPic" style="background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>

                            </td>
                            <td class="cell3">

                             <div class="container">
                                <div class="demo num1">

                                <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Backgroundtext
                                            </td>
                                        </tr>

                                    </table>

                                </div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                hallo meine Freunde
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>

                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>

      </div>


      </div>
    </div>

</body>
</html>

CSS：

#section1.section .tableReferences {
    width:100%;
    height:100%;
    background-color:#F3A008;
    border-collapse: collapse;  
}

#section1.section .tableReferences .row1 {
    height:33.33%;  
}

#section1.section .tableReferences .row1 .tableRow1{
    height:100%;
    width:100%;
    border-collapse: collapse;
}

#section1.section .tableReferences .row1 .tableRow1 .cell1{
    width:25%;
}

#section1.section .tableReferences .row1 .tableRow1 .cell2{
    width:50%;
}

#section1.section .tableReferences .row1 .tableRow1 .cell3{
    width:25%;  
}

#section1.section .tableReferences .row2 {
    height:33.33%;  
}

#section1.section .tableReferences .row2 .tableRow2{
    height:100%;
    width:100%;
    border-collapse: collapse;
}

#section1.section .tableReferences .row2 .tableRow2 .cell1{
    width:50%;
}

#section1.section .tableReferences .row2 .tableRow2 .cell2{
    width:25%;
}

#section1.section .tableReferences .row2 .tableRow2 .cell3{
    width:25%;  
}

#section1.section .tableReferences .row3 {
    height:33.33%;  
}

#section1.section .tableReferences .row3 .tableRow3{
    height:100%;
    width:100%;
    border-collapse: collapse;
}

#section1.section .tableReferences .row3 .tableRow3 .cell1{
    width:25%;

}

#section1.section .tableReferences .row3 .tableRow3 .cell2{
    width:25%;
}

#section1.section .tableReferences .row3 .tableRow3 .cell3{
    width:50%;  
}

#section1.section .tableReferences .container{
    height: 100%;
    width: 100%;
    position: relative;
    z-index:2;
}
#section1.section .tableReferences .num2{
    height: 100%;
    width: 100%;
    position: absolute; left: 0px;
    z-index: 2;
}

#section1.section .tableReferences .num1{
    height: 100%;
    width: 100%;
    position: absolute; left: 0px;
    z-index: 1;
}

#section1.section .tableReferences .num2{
    height: 100%;
    width: 100%;
    position: absolute; left: 0px;
    z-index: 2;
}

#section1.section .tableReferences .num1{
    height: 100%;
    width: 100%;
    position: absolute; left: 0px;
    z-index: 1;
}

#section1.section .invisibleAnimationContainer {
    height:100%;
    width:100%; 
}

.referencesPic {
    height:100%;
    width:100%; 
    background-color:black;
}

.hoverContent {
    height:100%;
    width:100%;
    font-size:2.0vh;    
    text-align:center;
    color:yellow;
    horizontal-align:center;
}

.imageContainer{
    height:100%;
    width:100%;
    background-color:green; 
}

/* Test */

.myScreen {
    height:100%;
    width:100%;
    background-color:green;
}

我非常感谢每一个帮助因为我已经在那个问题上花了几个小时而且我无法修复它....

【问题讨论】：

你能调试一下吗？控制台中是否显示任何错误？你能检查一些元素并找出它们不显示的原因吗？
你到底是什么意思？我使用了 W3C 验证工具，它们没有给我任何错误...有趣的是，该工具的建议完全破坏了我的网站...
我的意思是browser tools。不是验证器。
Firefox 说函数 getPreventDefault() 已被弃用。会不会是这个问题？
不，这只是到处出现的警告。

标签： html css firefox compatibility

【解决方案1】：

正如here 指出的那样，将background-clip: padding-box 添加到您的td 元素中，它应该可以工作。 Firefox 中的这个 bug 好像还没有修复？

【讨论】：

感谢您的回答！我已将您的建议添加到我的代码中，但它仍然没有改变任何东西......

【解决方案2】：

好的，我发现，Firefox 最终显示图像时我加了

height:100px; width:100px;

到带有背景图像的 div。一方面，图像显示在另一方面，如果没有相对大小，它是无用的。 '%' 的值不起作用...... 悬停效果仍然不起作用。

与

width: -moz-available;

我得到了图片的全宽。我怎么也能得到这样的高度？ -moz-available 参数不适用于它。

该网站在 Safari、Chrome、IE 和 Opera 上运行良好。只是不在 Firefox 上

【讨论】：