html - 网站在 Firefox 中显示错误

标签 html css firefox compatibility

我编写了一个网站并且运行良好。 基本上我正在使用 this全页 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

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

最佳答案

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

关于html - 网站在 Firefox 中显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32445629/

上一篇：javascript - 居中 div 之前的 div

下一篇：css - 使用CSS水平滚动内部div(具有垂直滚动)与外部div

相关文章：

css - Firefox 17 和基于 CSS 边框的三 Angular 形无法正确呈现

html - 在表中插入数据时，筛选搜索列表不会检索结果

javascript - Xamarin不允许加载本地资源文件

javascript - 如何使用 JavaScript/jQuery 在一个页面上激活多个按钮？

html - IE7-DIV 不采用溢出 :auto; 的父 DIV 属性的问题

ajax - 如何在 firefox 扩展中创建 JSON post 请求？

c# - Firefox 不显示动态添加的 Silverlight 5 控件

html - 如何在 Wordpress 边栏中拆分小部件？

javascript - 如何将多个 HTML 表单中的值添加到一个数组中进行发送

css - 如果盒子模型不受影响，为什么在翻译元素时会发生溢出？

©2024 IT工具网  联系我们