我的網站在Firefox上看起來非常不同。無法查明原因

Question

這是我的網站http://aaronisdead.com/sites/dejatest/deja.html

在Chrome瀏覽器中查看時，看起來幾乎與我想要的一樣。 在Firefox中，所有文本都位於頁面的中心，而不是div的中心。 過濾器還有一個問題，該問題導致每個div都顯示為黑色（當整個網站都是圖片時，這是一個大問題）

HTML結構

<div id="container">
        <div id="row">
            <div class="cell A1"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div></div>
            <div class="cell A2"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div></div>
            <div class="cell A3"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>EPHEMERA</p>DIGITAL COLLAGE</div></div>
            <div class="cell A4"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>REJJIE SNOW</p>SITE DESIGN</div></div>
            </div>

這只是一排，另外三排具有完全相同的結構

CSS：出於簡化的原因，我將很多代碼簡化為一行代碼

.A1, .A2, .A3, .A4 {
        position:relative;
        }

        .A1:before, .A2:before, .A3:before, .A4:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        transition: opacity .2s ease-in-out;
        -moz-transition: opacity .2s ease-in-out;
        -webkit-transition: -webkit-filter .2s ease-in-out;
        filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(90%) brightness(30%); /* Google Chrome, Safari 6+ & Opera 15+ */ 
        z-index: -1;
        }

        .A1:before {background-image:url('spindrift.jpg'); background-size:cover;}
        .A2:before {background-image:url('daynnite.jpg'); background-size:cover;}
        .A3:before {background-image:url('ephemera.jpg'); background-size:cover;}
        .A4:before {background-image:url('rejjiesnow.jpg'); background-size:cover;}


        .A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before, {
        -webkit-filter:none;
        }

            /* text hover */
        div.cell:hover #text{
        opacity:0;
        filter: none;
        -webkit-filter: grayscale(0);
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out;
        }

        #text{
        opacity:1;
        display:table;
        position:absolute;
        z-index:999;
        color:#ffffff;
        text-align:center;
        width:100%;
        top:44%;
        left:0;
        filter: none;
        -webkit-filter: grayscale(0);
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out;
        font:12px ProximaNovaRegular, sans serif;
        text-decoration:none;
        }

        p {
        font:16px ProximaNovaBold, sans serif;
        margin:0;
        padding:1 0 1 0;
        }
/*Table rules*/
    .container{
            display:table-row;
            width:100%;
            }

        .row{
        display:table-row;
        width:100%;
        }

        .cell{
        position:relative;
        display:table-cell;
        width:700px;
        height:auto;
        transition: opacity .3s ease-in-out;
        -moz-transition: opacity .3s ease-in-out;
        -webkit-transition: opacity .3s ease-in-out;
        }

        html{
        margin:0;
        padding:0;
        height:100%;
        width:100%;
        }

        body{
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        background-color:black;
        color:black;
        }

    /* hover */

div.cell:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
opacity:1.0;
}

我不確定是什么原因造成的，我討厭在這里問這樣一個模糊的問題，所以我包含了很多代碼。如果禁用.cell {display:table-cell;} ，則該網站會變成可識別的內容。 我意識到有一個無法在Firefox上運行的灰度濾鏡，但是我主要關心的是將文本放在div的中心。

隨時在實際站點上檢查源代碼。

Answer 1

您應該首先在文檔中具有doctype標記。 現在，您什么都沒有告訴瀏覽器您要使用的HTML版本，因此它將使用Quirks模式，該模式基本上與您可以想象的最舊的瀏覽器兼容。

您的HTML標記無效，至少對於所使用的HTML版本而言是無效的。 您在<a>元素內有<div>元素，並且僅在HTML 5中允許。除非您有一個doctype標記說您正在使用HTML 5，否則瀏覽器將嘗試修復標記，例如，通過移動標記。 div在a之外。

您的標記還有其他錯誤，例如元素嵌套錯誤。 您具有像這樣嵌套的元素：

<div>
  <a>
    <img>
    <div>
    </div>
  </div>
</a>

正如你看到的， div和a結尾標簽是在錯誤的順序。

您的樣式完全超出了HTML文檔的范圍。 它應該在<head>標記內。

<head>和<title>標記丟失。 它們是HTML文檔中的必需元素。

解決這些問題將為您提供在不同瀏覽器中獲得一致結果的基礎。

Answer 2

從您的#text刪除

position:absolute

我在FF28上進行了測試，並且可以正常工作。

讓我知道這是否是您想要的。

並且您的背景未顯示在FF中，請嘗試在背景圖片中添加所有供應商：

-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Answer 3

您沒有doctype，因此您處於“怪癖模式”，就像1995年一樣，沒有兩個瀏覽器看起來可能相同。 所有新網頁都必須具有doctype。 使用這個：

<!DOCTYPE html>

這將使所有瀏覽器進入“標准模式”。

不幸的是，由於您不是從標准模式開始的，因此這可能會使您的頁面有些移動，看上去與現在不同，但必須這樣做。

此外，您的標記無效，因為您將腳本標記放在html元素之外。 基本上，html元素是文檔本身，您不能這樣做。

有關所有錯誤的完整列表，請在此處插入您的站點鏈接。 現在，僅顯示98個HTML錯誤。