Question

在我的联系页面上，仅在Chrome中（这在Firefox，Edge和我的TA浏览器中解析得很好），背景在大部分时间都消失了。对于我的TA的Macbook，当她在一个盒子上盘旋，问题自行解决。我的Chrome版本是63.0.3239.132。

<!DOCTYPE html>
<html class="h-100p" lang="en">
    <head>
        <title>Daniel G Richmond</title>
        <link href="./assets/css/reset.css" rel="stylesheet" type="text/css">
        <link href="./assets/css/style.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8">
    </head>
    <body class="bgc-388E3C d-f fd-c h-100p pad-20px">
        <section class="fl-1">
        <header>
            <nav class="ai-b bb-s c-E8F5E9 d-f jc-sa">
                <p class="fs-300p w-61p">Daniel Richmond</p> 
                <div class="ai-b d-f jc-sa w-39p">
                    <a class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 c-E8F5E9 d-b fs-200p pad-20px ta-c td-n bgc-1B5E20-hv" href="./index.html">About</a>
                    <a class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 c-E8F5E9 d-b fs-200p pad-20px ta-c td-n bgc-1B5E20-hv" href="./portfolio.html">Portfolio</a>
                    <a class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 c-E8F5E9 d-b fs-200p pad-20px ta-c td-n bgc-1B5E20-hv" href="./contact.html">Contact</a>
                </div>
            </nav>
        </header>
        <section id="content" class="ai-fs d-f jc-sa mt-5p">
            <form action="/tbd" method="POST" id="contact" class="bdc-FFEB3B bds-s bgc-1B5E20 bw-3 w-55p">
                <div><h2 class="bb-s c-E8F5E9 fs-200p">Contact Me</h2></div>
                <div class="c-E8F5E9 fs-150p pad-1p"><label for="firstName">First Name:</label></div>
                <div><input class="ml-5p w-30p" type="text" id="firstName" name="first_name"></div>
                <div class="c-E8F5E9 fs-150p pad-1p"><label for="lastName">Last Name:</label></div>
                <div><input class="ml-5p w-30p" type="text" id="lastName" name="last_name"></div>
                <div class="c-E8F5E9 fs-150p pad-1p"><label for="mail">E-mail:</label></div>
                <div><input class="ml-5p w-30p" type="email" id="mail" name="user_mail"></div>
                <div class="c-E8F5E9 fs-150p pad-1p"><label for="msg">Message:</label></div>
                <div><textarea class="ml-5p w-30p" id="msg" name="user_message">Type your message here!</textarea></div>
                <!-- There will eventually be JavaScript and MySQL to make the button do what I want it to do! -->
                <div  class="c-E8F5E9 fs-150p pad-1p"><button type="submit">Send your message</button></div>
            </form>
            <aside class="bdc-FFEB3B bds-s bw-3 bgc-1B5E20 w-30p">
                <h2 class="bb-s c-E8F5E9 fs-200p pad-20px">Connect with me!</h2>
                <div id="connections" class="d-f fb-30p fg-1 jc-sa mt-5p">
                    <a href="https://github.com/Sonic12040"><img class="pad-5p" src="./assets/images/gitHub.png" alt="GitHub"></a>
                    <a href="https://www.linkedin.com/danielgrichmond"><img class="pad-5p" src="./assets/images/linkedIn.png" alt="LinkedIn"></a>
                    <a href="https://stackoverflow.com/users/9054375/daniel-richmond"><img class="pad-5p" src="./assets/images/stackOverflow.png" alt="Stack Overflow"></a>
                </div>
            </aside>
        </section>
        </section>

        <footer class="bt-s c-E8F5E9 fs-0 pad-20px">
            <p class="fs-200p ta-c">Copyright &copy;2018 by <a href="mailto:daniel.g.richmond@gmail.com">Daniel G Richmond</a></p>
        </footer>
    </body>
</html>

这是CSS文件（我也有一个reset.css）：

.bb-s {
border-bottom: solid;
}
.bdc-FFEB3B {
    border-color: #FFEB3B;
}

.bds-s {
    border-style: solid;
}

.bgc-1B5E20 {
    background-color: #1B5E20;
}

.bgc-1B5E20-hv:hover {
    background-color: #00C853;
}

.bgc-388E3C {
    background-color: #388E3C;
}

.bt-s {
    border-top: solid;
}

.bw-3 {
    border-width: 3px;
}

.c-E8F5E9 {
    color: #E8F5E9;
}

.d-b {
    display: block;
}

.d-f {
    display: flex;
}

.f-l {
    float: left;
}

.fb-30p {
    flex-basis: 30%;
}

.fd-c {
    flex-direction: column;
}

.fg-1 {
    flex-grow: 1;
}

.fs-0 {
    flex-shrink: 0;
}

.fl-1 {
    flex: 1 0 auto;
}

.fs-150p {
    font-size: 150%;
}

.fs-200p {
    font-size: 200%;
}

.fs-300p {
    font-size: 300%;
  }

.h-100p {
    height: 100%;
}

.h-128px {
    height: 128px;
}

.jc-sa {
    justify-content: space-around;
}

.ml-5p {
    margin-left: 5%;
}

.mt-5p {
    margin-top: 5%;
}

.pad-1p {
    padding: 1%;
}

.pad-5p {
    padding: 5%;
}

.pad-20px {
    padding: 20px;
}

.ta-c {
    text-align: center;
}

.td-n {
    text-decoration: none;
}

.w-28p {
    width: 28%;
}

.w-30p {
    width: 30%;
}

.w-39p {
    width: 39%;
}

.w-40p {
    width: 40%;
}

.w-55p {
    width: 55%;
}

.w-61p {
    width: 61%
}

.w-128px {
    width: 128px;
}

Answer 1

如果你看一下这个小提琴：https://jsfiddle.net/xeno1100/e7te2epn/2/

您会看到您的背景在Chrome中正常运行。很可能你的问题出在你的reset.css。

以下是Eric Meyer的重置2.0的示例，它可以在Chrome中运行： https://jsfiddle.net/xeno1100/e7te2epn/5/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

这里是reset.css的直接链接 https://meyerweb.com/eric/tools/css/reset/reset.css

背景颜色在我的联系页面上的Chrome中消失（间歇性地）

1 个答案: