细线出现在网站的各个部分之间

时间:2018-11-05 01:51:37

标签: html css html5 css3

这可能是一个相当简单的修复程序,但我无法弄清楚。因此,当我使用浏览器预览网站时,这些细线分隔了每个部分(如第一张图片所示)。我已经使用Safari,Chrome和Firefox预览了该网站。 Firefox没有显示行,但是Safari和Chrome显示了行。

如果我进入Dreamweaver,则这些行不会出现(如图2所示)。我已经检查了每个部分的CSS,但是没有看到任何使这些行出现的内容。

任何帮助将不胜感激。

这是HTML:

<!DOCTYPE HTML>

<html lang="en-US">
<head>
    <title>World Valve Co., Ltd.</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="Description" content="Piping design and manufacture of marine-land plant valve, World Valve Co., Ltd. is, we have a company founded primarily the construction industry. The manufacturing of our, so far had been completed in selling out state by the sale of the product, resource is not unlimited If you do not Ika also considered effective use of resources in the future. 
    I think, since I have been running in all areas already for effective use, it should continue to run in the valve industry as a model this. 
    You understand that this is also the end user like, it is proposed to happy if Tamaware your active cooperation in order that. 
    I believe the future, we want to continue beyond the age of actively pursuing recycling and maintenance business, with the aim of supply of the product stable, diversified including ... also its meaning." />
    <meta name="Keywords" content="Valve,Shipbuilding,Plant
    ,Construction,Environment,World Valve Co., Ltd." />
    <link rel="stylesheet" href="assets/css/main.css" />
    <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">

    <!-- Page Wrapper -->
        <div id="page-wrapper">

            <!-- Header -->
                <header id="header">
                    <h1><a href="index.html"><img src="images/LOGOH.jpg" alt="World Valve Co., Ltd." width="91" height="48" style="float: left; padding-right: 1em; margin-left: 0px; margin-right: 0px;"></a><a href="index.html">World Valve Co., Ltd.</a></h1>
                    <nav>
                        <a href="#menu">Menu</a>
                    </nav>
                </header>

            <!-- Menu -->
                <nav id="menu">
                    <div class="inner">
                        <h2>Menu</h2>
                        <ul class="links">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="CompanyProfile.html">Company Profile</a></li>
                            <li><a href="Products.html">Products</a></li>
                            <li><a href="Valve.html">Valves</a></li>
                            <li><a href="Joints.html">Joints</a></li>
                            <li><a href="OtherP.html">Other Products</a></li>
                            <li><a href="../index.html">日本語</a></li>
                            <li><a href="index.html">English</a></li>
                        </ul>
                        <a href="#" class="close">Close</a>
                    </div>
                </nav>

            <!-- Banner -->
                <section id="banner">
                    <div class="inner">
                        <div class="logo"><span class="icon fa-ship"></span></div>
                        <h2>World Valve Co., Ltd. <br> Imagination & Creativity</h2>
                        <p>World Valve Co., Ltd. meets the needs of a diversifying market, with our continued contributions to society and the environment, through our supply of various quality materials and equipment in fluidic control.</p>
                    </div>
                </section>

            <!-- Wrapper -->
                <section id="wrapper">

                    <!-- One -->
                        <section id="one" class="wrapper spotlight style1">
                            <div class="inner">
                                <a href="#" class="image"><img src="images/LOGO.jpg" alt="World Valve Co., Ltd." /></a>
                                <div class="content">
                                    <h2 class="major">Company Mission</h2>
                                    <p>World Valve Co., Ltd. is a marine, land piping and valve design and manufacturing company. Our company primarily supports the shipbuilding industry by supplying and manufacturing quality products that are recognized around the world and are in high demand. Resources on earth are not unlimited so we must consider more effective use of these resources in the future. Since many other fields have started using more effective resource management, we believe this should continue into the valve industry. All the responsibility does not fall solely on companies like ours however. The cooperation of our customers is needed to fulfill our mission of a more efficient industry. We believe the future is an age where we do not have to actively pursue more efficient recycling and maintenance efforts. We view an age where our stable product supply, diversified services, and our hope for a better tomorrow will drive innovation and creativity.</p>
                                    <a href="CompanyProfile.html" class="special">Learn more</a>
                                </div>
                            </div>
                        </section>

                    <!-- Two -->
                        <section id="two" class="wrapper alt spotlight style2">
                            <div class="inner">
                                <a href="#" class="image"><img src="images/shipyard.jpg" alt="Our Business" /></a>
                                <div class="content">
                                    <h2 class="major">Our Business</h2>
                                    <p>In the 21st century, there is one issue that effects everything on earth: Global Warming. We at World Valve Co., Ltd. are specialized professional suppliers of valves, fittings, and services for industries such as shipbuilding, oil refinery, chemical plants, gas plants, general industrial plants, etc. World Valve Co., Ltd. commits to be a leader in delivering safe and environmentally friendly products to our customers. Depending on the intended usage and other conditions, the materials and specifications for the valves we offer will vary. We strive to not only fulfill customer requirements but also recommend the most environmentally friendly products.</p>
                                    <a href="Products.html" class="special">Learn more</a>
                                </div>
                            </div>
                        </section>

                    <!-- Three -->
                        <section id="three" class="wrapper spotlight style3">
                            <div class="inner">
                                <a href="#" class="image"><img src="img/policy_bg.png" alt="Products" /></a>
                                <div class="content">
                                    <h2 class="major">Our Products</h2>
                                    <p>We offer a wide range of products for the shipbuilding industry and beyond.</p>
                                    <a href="#four" class="special">Learn more</a>
                                </div>
                            </div>
                        </section>

                    <!-- Four -->
                        <section id="four" class="wrapper alt style1">
                            <div class="inner">
                                <h2 class="major">Specializations</h2>
                                <p>World Valve Co., Ltd. specializes in three main areas:</p>
                                <section class="features">
                                    <article>
                                        <a href="#" class="image"><img src="images/DoubleOffsetPOV.JPG" alt="Valves" /></a>
                                        <h3 class="major">Valves</h3>
                                        <p>At World Valve, we pride ourselves in our vast catalogue of top of the line valves for the shipbuilding industry, industrial plants, and more. Click below to learn more.</p>
                                        <a href="Valve.html" class="special">Learn more</a>
                                    </article>
                                    <article>
                                        <a href="#" class="image"><img src="images/遠隔装置用.png" alt="Joints" /></a>
                                        <h3 class="major">Joints/Fittings</h3>
                                        <p>To further support the shipbuilding industry, we also offer a range of different piping, joints, and fittings. Click below to learn more.</p>
                                        <a href="Joints.html" class="special">Learn more</a>
                                    </article>
                                    <article>
                                        <a href="#" class="image"><img src="images/遠隔装置用2.png" alt="Other Products" /></a>
                                        <h3 class="major">Other Products</h3>
                                        <p>We also offer a range of other products for different industries ranging from air tanks to nuts and bolts. Click below to learn more.</p>
                                        <a href="OtherP.html" class="special">Learn more</a>
                                    </article>
                                    <article>
                                        <a href="#" class="image"><img src="images/0f197c7d0f9056df0b494b3a710da061.png" alt="Services" /></a>
                                        <h3 class="major">Services</h3>
                                        <p>We also offer services for maintenance, support, and other specified requests. Please contact us to learn more. </p>
                                        <a href="#footer" class="special">Learn more</a>
                                    </article>
                                </section>
                                <h2 class="major">Company News</h2>
                                    <p> XXXX XX, 2018:Introduced a new, updated website (both English and Japanese).</p>
    <p> October 1, 2013:Relocated our headquarters to Yokohama, Kanagawa Prefecture, Minami-ku, Yoshino cho 5-chome, 27 Address 7-1F.</p>
    <p> February 1, 2012:Partnered with (Saijo) Ltd M industry and started various equipment installations, adjustments, and maintenance work.</p>
    <p> October 20, 2011:Relocated our headquarters to Yokohama, Kanagawa Prefecture, Minami-ku, Magane cho 2-chome, 20 Address 9-1F.</p>
    <p> January 1, 2011:Website published</p>
                            </div>
                        </section>

                </section>

            <!-- Footer -->
                <section id="footer">
                    <div class="inner">
                        <h2 class="major">Get in touch</h2>
                        <p>To contact, please use this form. Your contact information will be held in the strictest confidence as per our privacy policy.</p>
                        <form method="post" action="contact.php">
                            <div class="fields">
                                <div class="field">
                                    <label for="name">Name</label>
                                    <input type="text" name="name" id="name" placeholder="Type Here" pattern="[a-zA-Z]+" required/>
                                </div>
                                <div class="field">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" id="email" placeholder="Type Here" required/>
                                </div>
                                <div class="field">
                                    <label for="message">Message</label>
                                    <textarea name="message" id="message" rows="4" placeholder="Type Here" required></textarea>
                                </div>
                            </div>
                            <ul class="actions">
                                <li><input type="submit" value="Send Message" name="submit"/></li>
                            </ul>
                        </form>
                        <ul class="contact">
                            <li class="fa-home">
                                World Valve Co., Ltd. <br />
                                1F 5-27-7, Yoshinocho, Minami-ku, <br />
                                Yokohama, 232-0014, Japan
                            </li>
                            <li class="fa-phone"><a href="tel:+81-45-251-2682"> +81-45-251-2682 </a></li>
                            <!--<li class="fa-envelope"><a href="#">information@untitled.tld</a></li>-->
                            <li class="fa-twitter"><a href="https://twitter.com/WorldValveCo?lang=en">twitter.com/WorldValveCo</a></li>
                            <li class="fa-facebook"><a href="https://www.facebook.com/WorldValveCo/">facebook.com/WorldValveCo/</a></li>
                            <li class="fa-youtube"><a href="https://www.youtube.com/channel/UC1hdwpxD3miqn4bs-0pyfAA?">youtube.com/WorldValveCo</a></li>
                            <li class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_email"></a> <a class="a2a_button_line"></a> <a class="a2a_button_kakao"></a> <a class="a2a_button_wechat"></a> </li>
<script async src="https://static.addtoany.com/menu/page.js"></script> 
                        </ul>
                        <ul class="copyright">
                            <li>&copy; Copyright (C) WorldValve Corporation. All Rights Reserved.</li><li><a href="Future.html">Future Prospects </a></li><li><a href="InfoPro.html">Privacy Policy </a></li><li><a href="Site.html">Site Map </a></li>
                        </ul>
                    </div>
                </section>

        </div>

    <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/jquery.scrollex.min.js"></script>
        <script src="assets/js/browser.min.js"></script>
        <script src="assets/js/breakpoints.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>

</body>

这是相关的CSS代码:

#wrapper > header {
    padding: 11em 0 2.25em 0 ;
}

    #wrapper > header .inner {
        margin: 0 auto;
        width: 55em;
    }

    #wrapper > header h2 {
        border-bottom: solid 2px rgba(255, 255, 255, 0.125);
        font-size: 2em;
        margin-bottom: 0.8em;
        padding-bottom: 0.4em;
    }

    #wrapper > header p {
        font-family: Raleway, Helvetica, sans-serif;
        font-size: 1em;
        font-weight: 200;
        letter-spacing: 0.1em;
        line-height: 2;
        text-transform: uppercase;
    }

@media screen and (max-width: 1280px) {

    #wrapper > header {
        padding: 9em 0 6.25em 0 ;
        background-color: #2e3141;
        background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
        background-size: auto, cover;
        background-position: center, 0% 30%;
        margin-bottom: -6.5em;
    }

}

@media screen and (max-width: 980px) {

    #wrapper > header {
        padding: 11em 3em 7.375em 3em ;
        background-size: auto, cover;
        background-position: center, 0% 0%;
        margin-bottom: -4.75em;
    }

        #wrapper > header .inner {
            width: 100%;
        }

}

@media screen and (max-width: 736px) {

    #wrapper > header {
        padding: 6.5em 2em 3em 2em ;
        background-size: auto, 125%;
        margin-bottom: -2.5em;
    }

        #wrapper > header h2 {
            font-size: 1.25em;
        }

        #wrapper > header p {
            font-size: 0.8em;
        }

}

.wrapper {
background-color: #1A3F79;
margin: 6.5em 0;
position: relative;
}

    .wrapper:before, .wrapper:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%231A3F79%3B' /%3E%3C/svg%3E");
    }

    .wrapper:before {
        box-shadow: inset 0 0px 0 0 #2e3141, 0 0px 0 0 #2e3141;
    }

    .wrapper:after {
        box-shadow: inset 0 0px 0 0 #2e3141, 0 0px 0 0 #2e3141;
    }

    .wrapper:before, .wrapper:after {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        content: '';
        display: block;
        height: 6.5em;
        position: absolute;
        width: 100%;
    }

    .wrapper:before {
        left: 0;
        top: -6.5em;
    }

    .wrapper:after {
        -moz-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
        transform: scaleY(-1);
        bottom: -6.5em;
        left: 0;
    }

    .wrapper.alt:before {
        -moz-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
        transform: scaleX(-1);
    }

    .wrapper.alt:after {
        -moz-transform: scaleY(-1) scaleX(-1);
        -webkit-transform: scaleY(-1) scaleX(-1);
        -ms-transform: scaleY(-1) scaleX(-1);
        transform: scaleY(-1) scaleX(-1);
    }

    .wrapper .inner {
        padding: 3em 0 1em 0 ;
        margin: 0 auto;
        width: 55em;
    }

    .wrapper.style2 {
        background-color: #353849;
    }

        .wrapper.style2:before, .wrapper.style2:after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E");
        }

        .wrapper.style2:before {
            box-shadow: inset 0 0px 0 0 #353849, 0 0px 0 0 #353849;
        }

        .wrapper.style2:after {
            box-shadow: inset 0 0px 0 0 #353849, 0 0px 0 0 #353849;
        }

    .wrapper.style3 {
        background-color: #3d4051;
    }

        .wrapper.style3:before, .wrapper.style3:after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E");
        }

        .wrapper.style3:before {
            box-shadow: inset 0 0px 0 0 #3d4051, 0 0px 0 0 #3d4051;
        }

        .wrapper.style3:after {
            box-shadow: inset 0 0px 0 0 #3d4051, 0 0px 0 0 #3d4051;
        }

    .wrapper.style4 {
        background-color: #454858;
    }

        .wrapper.style4:before, .wrapper.style4:after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E");
        }

        .wrapper.style4:before {
            box-shadow: inset 0 0px 0 0 #454858, 0 0px 0 0 #454858;
        }

        .wrapper.style4:after {
            box-shadow: inset 0 0px 0 0 #454858, 0 0px 0 0 #454858;
        }

    .wrapper.style5 {
        background-color: #4d5060;
    }

        .wrapper.style5:before, .wrapper.style5:after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E");
        }

        .wrapper.style5:before {
            box-shadow: inset 0 0px 0 0 #4d5060, 0 0px 0 0 #4d5060;
        }

        .wrapper.style5:after {
            box-shadow: inset 0 0px 0 0 #4d5060, 0 0px 0 0 #4d5060;
        }

    .wrapper.style6 {
        background-color: #555867;
    }

        .wrapper.style6:before, .wrapper.style6:after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E");
        }

        .wrapper.style6:before {
            box-shadow: inset 0 0px 0 0 #555867, 0 0px 0 0 #555867;
        }

        .wrapper.style6:after {
            box-shadow: inset 0 0px 0 0 #555867, 0 0px 0 0 #555867;
        }

    .wrapper.spotlight {
background-color: #0065A2;
    }

        .wrapper.spotlight:before, .wrapper.spotlight:after {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%230065A2%3B' /%3E%3C/svg%3E");
        }

        .wrapper.spotlight:before {
            box-shadow: inset 0 0px 0 0 #4c5c96, 0 0px 0 0 #4c5c96;
        }

        .wrapper.spotlight:after {
            box-shadow: inset 0 0px 0 0 #4c5c96, 0 0px 0 0 #4c5c96;
        }

        .wrapper.spotlight .inner {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-align-items: center;
            -webkit-align-items: center;
            -ms-align-items: center;
            align-items: center;
            -moz-flex-direction: row;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
        }

        .wrapper.spotlight .image {
            border-radius: 100%;
            margin: 0 3em 2em 0;
            width: 22em;
            overflow: hidden;
            -ms-flex: 1;
        }

            .wrapper.spotlight .image img {
                border-radius: 100%;
                width: 100%;
            }

        .wrapper.spotlight .content {
            width: 100%;
            -ms-flex: 2;
        }

        .wrapper.spotlight:nth-child(2n - 1) .inner {
            -moz-flex-direction: row-reverse;
            -webkit-flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            text-align: right;
        }

        .wrapper.spotlight:nth-child(2n - 1) .image {
            margin: 0 0 2em 3em;
        }

        .wrapper.spotlight.style2 {
background-color: #1659A8;
        }

            .wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%231659A8%3B' /%3E%3C/svg%3E");
            }

            .wrapper.spotlight.style2:before {
                box-shadow: inset 0 0px 0 0 #45558d, 0 0px 0 0 #45558d;
            }

            .wrapper.spotlight.style2:after {
                box-shadow: inset 0 0px 0 0 #45558d, 0 0px 0 0 #45558d;
            }

        .wrapper.spotlight.style3 {
background-color: #2355A3;
        }

            .wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232355A3%3B' /%3E%3C/svg%3E");
            }

            .wrapper.spotlight.style3:before {
                box-shadow: inset 0 0px 0 0 #3f4e85, 0 0px 0 0 #3f4e85;
            }

            .wrapper.spotlight.style3:after {
                box-shadow: inset 0 0px 0 0 #3f4e85, 0 0px 0 0 #3f4e85;
            }

        .wrapper.spotlight.style4 {
            background-color: #39477c;
        }

            .wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2339477c%3B' /%3E%3C/svg%3E");
            }

            .wrapper.spotlight.style4:before {
                box-shadow: inset 0 0px 0 0 #39477c, 0 0px 0 0 #39477c;
            }

            .wrapper.spotlight.style4:after {
                box-shadow: inset 0 0px 0 0 #39477c, 0 0px 0 0 #39477c;
            }

        .wrapper.spotlight.style5 {
            background-color: #324072;
        }

            .wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E");
            }

            .wrapper.spotlight.style5:before {
                box-shadow: inset 0 0px 0 0 #324072, 0 0px 0 0 #324072;
            }

            .wrapper.spotlight.style5:after {
                box-shadow: inset 0 0px 0 0 #324072, 0 0px 0 0 #324072;
            }

        .wrapper.spotlight.style6 {
            background-color: #2d3a69;
        }

            .wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E");
            }

            .wrapper.spotlight.style6:before {
                box-shadow: inset 0 0px 0 0 #2d3a69, 0 0px 0 0 #2d3a69;
            }

            .wrapper.spotlight.style6:after {
                box-shadow: inset 0 0px 0 0 #2d3a69, 0 0px 0 0 #2d3a69;
            }

    @media screen and (max-width: 980px) {

        .wrapper {
            margin: 4.75em 0;
        }

            .wrapper:before, .wrapper:after {
                height: 4.75em;
            }

            .wrapper:before {
                top: -4.75em;
            }

            .wrapper:after {
                bottom: -4.75em;
                left: 0;
            }

            .wrapper .inner {
                padding: 3em 3em 1em 3em ;
                width: 100%;
            }

            .wrapper.spotlight .image {
                margin: 0 2em 2em 0;
                width: 32em;
            }

            .wrapper.spotlight:nth-child(2n - 1) .image {
                margin: 0 0 2em 2em;
            }

    }

    @media screen and (max-width: 736px) {

        .wrapper {
            margin: 2.5em 0;
        }

            .wrapper:before, .wrapper:after {
                height: 2.5em;
            }

            .wrapper:before {
                top: -2.5em;
            }

            .wrapper:after {
                bottom: -2.5em;
                left: 0;
            }

            .wrapper .inner {
                padding: 2em 2em 0.1em 2em ;
            }

            .wrapper.spotlight .inner {
                -moz-align-items: -moz-flex-start;
                -webkit-align-items: -webkit-flex-start;
                -ms-align-items: -ms-flex-start;
                align-items: flex-start;
            }

            .wrapper.spotlight .image {
                width: 19em;
                margin: 0 1.75em 2em 0;
            }

            .wrapper.spotlight:nth-child(2n - 1) .image {
                margin: 0 0 2em 1.75em;
            }

    }

    @media screen and (max-width: 480px) {

        .wrapper.spotlight .inner {
            display: block;
        }

        .wrapper.spotlight .image {
            margin: 0 0 1em 0 !important;
            max-width: 85%;
            width: 12em;
        }

    }

    @media screen and (max-width: 360px) {

        .wrapper .inner {
            padding: 2em 1.5em 0.1em 1.5em ;
        }

    }

Thin lines appear in between sections

Working in Dreamweaver does not show the lines

3 个答案:

答案 0 :(得分:2)

它将适用于细线,请更改css下方的'.wrapper'类的边距:

.wrapper {
	background-color: #1A3F79;
	margin: 6.2em 0;
	position: relative;
	}

答案 1 :(得分:0)

我不确定这是否可以帮助您实现目标,但也许可以使用CSS剪切路径:达到相同的结果并添加供应商前缀,以确保跨浏览器兼容性

这些链接可能会对您有所帮助 https://css-tricks.com/almanac/properties/c/clip/

https://bennettfeely.com/clippy/

希望这会有所帮助

答案 2 :(得分:0)

.wrapper:before, .wrapper:after {
        height: 6.55em; /* Increaseheight by .05em */
}

将高度增加.05即可解决。