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

Question

On my contact page, and only in Chrome (this resolves fine in Firefox, Edge, and on my TA's Safari Browser, the background disappears most of the time. For my TA's Macbook, when she hovers over a box, the issue resolves itself. My version of Chrome is 63.0.3239.132. 在我的联系页面上，只有在Chrome中（在Firefox，Edge和TA的Safari浏览器中，这种情况可以很好地解决，大多数情况下背景消失了。对于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>

Here is the CSS File (I also have a reset.css): 这是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

If you take a look at this fiddle: https://jsfiddle.net/xeno1100/e7te2epn/2/ 如果您看一下这个小提琴： https : //jsfiddle.net/xeno1100/e7te2epn/2/

You will see that your backgrounds are working in Chrome. 您会看到您的背景在Chrome中正常工作。 Most likely your problem is in your reset.css. 您的问题很可能是在您的reset.css中。

Here's an example with Eric Meyer's reset 2.0 that does work in Chrome: https://jsfiddle.net/xeno1100/e7te2epn/5/ 这是埃里克·梅耶（Eric Meyer）的reset 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;
}

Here's a direct link to the reset.css https://meyerweb.com/eric/tools/css/reset/reset.css 这是指向reset.css的直接链接https://meyerweb.com/eric/tools/css/reset/reset.css

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

问题描述

1 个解决方案

解决方案1
0 2018-02-17 02:30:46

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

问题描述

1 个解决方案

解决方案1 0 2018-02-17 02:30:46

解决方案1
0 2018-02-17 02:30:46