Firefox

时间：2015-09-07 20:27:00

标签： html css firefox compatibility

我编写了一个网站，但它运行正常。 基本上我使用的是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;
}

This is how it looks in Chrome and Safari

This is how it looks in Firefox

我非常感谢每一个帮助 因为我已经在这个问题上花了好几个小时 我无法解决它....

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题