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版本而言。您在<div>个元素中有<a>个元素，并且只允许在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>

这会将所有浏览器置于＆＃39;标准模式＆＃39;。

不幸的是，因为你没有在标准模式下开始，这可能会使你的页面移动一点，看起来与现在不同，但必须完成。

此外，由于您将脚本标记放在html元素之外，因此标记无效。 html元素本质上就是文档本身，你不能这样做。

有关所有错误的完整列表，plug in your site link here.目前，它仅显示98个HTML错误。

我的网站在Firefox上看起来非常不同..无法确定原因

3 个答案: