Question

这里比较新手。我已经把我的头发拉出来试图弄清楚为什么我的网站在Safari中工作但在Firefox中没有。我的firefox浏览器是最新的。好像Firefox完全忽略了CSS样式设置。我确信这个解决方案非常简单，但由于我一直盯着这个问题已经很长时间了，所以我确定无法忽视它。

这是HTML：

        <body>
        <div class="container">
            <article>
                <h1>//Onagus</h1>
                <p>Hallo and welcome to my site which is always a work in progress. I am using this site to showcase my web development skills as well as my other creative projects. Feel free to poke around and get a feel for what falls into my range of interest and experience.</p>
            </article>
            <div class="windowContainer">
                <div class="windowLine1"</div>
                    <div class="content">
                        <h3>News</h3>
                        <p>Sample Text</p>
                        <p><a class="cta" href="">Visit our blog</a></p>
                    </div>
                <div class="windowLine1"</div>  
                    <div class="content">
                        <h3>Visuals Blog</h3>
                        <p>Sample Text</p>
                        <p><a class="cta" href="">Read the article</a></p>
                    </div>  
                <div class="windowLine1"</div>  
                    <div class="content">
                        <h3>Media: Sound</h3>
                        <p>Sample Text</p>
                        <p><a class="cta" href="">Learn more</a></p>
                    </div>  
                <div class="windowLine2"</div>  
                    <div class="content">
                    <h3>Media: Video</h3>
                    <p>Sample Text</p>
                    <p><a class="cta" href="">Learn more</a></p>
                    </div>  
            </div>
            <nav>
                <a href="#">About</a>
                <a href="#">Music</a>
                <a href="#">Portfolio</a>
                <a href="#">Gallery</a>
            </nav>

            <footer>
                &copy; Onagus 2014
            </footer>

        </div>
    </body>
</html>

这是CSS：

    @charset "UTF-8";

body {
    background: #fceecb;
    color: #e6eed9;
}

.container {
    max-width: 1000px;
    height: 800px;
    margin: 0px, auto, 0px, auto;
    border: none;
    padding: 0px;
    background: url(../images/cabbitHouse1.jpg) #381f1a;
}

Answer 1

您的HTML格式不正确。浏览器会尝试为您修复它，但可能会以不同的方式执行此操作，从而产生不同的输出。您应该确保您的站点符合W3C标准，以确保最一致和未来的教师输出。

这是parser，可能对您有帮助。

见<div class="windowLine2"</div>。 div标签未正确关闭

<div class="windowLine2"</div>  
    <div class="content">
        <h3>Media: Video</h3>
        <p>Sample Text</p>
        <p>
            <a class="cta" href="">
                Learn more
            </a>
        </p>
    </div>

你可能想要这个：

<div class="windowLine2">  
    <div class="content">
        <h3>Media: Video</h3>
        <p>Sample Text</p>
        <p>
            <a class="cta" href="">
                Learn more
            </a>
        </p>
    </div>
</div>

网站适用于Safari，但不适用于Firefox

1 个答案: