Microsoft Edge bottom line bug

Question

 html * { box-sizing: border-box; padding:0; margin:0; } html, body { height: 100%; font-family: 'Roboto', sans-serif; color:#666666; line-height: 1.7em; } body { /* Location of the image */ background-image: url(1.jpg); /* Background image is centered vertically and horizontally at all times */ background-position: center center; /* Background image doesn't tile */ background-repeat: no-repeat; /* Background image is fixed in the viewport so that it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* This is what makes the background image rescale based on the container's size */ background-size: cover; /* Set a background color that will be displayed while the background image is loading */ background-color: #464646; } #full_2, #full_3, #full_4{ position: relative; height: 100vh; width: 100%; } #full_1 { position: relative; height: 100vh; width: 100%; } #full_1 { background: black; opacity: 0.36; } #full_4 { background: magenta; } #full_2 { background: white; } #full_3 { background: lightgray; } .arrow-down { position: absolute; bottom: 10px; width: 45px; height: 45px; left: calc(50% - 16px); } .arrow-down a img { width: 100%; } .logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;} .main-nav {float: right; width: 60%; height: 100%;} .menu { background-color: #373737; left: -285px; height: 100%; position: fixed; width: 285px; z-index: 5; } #main-header a{ text-decoration: none; color: #ffffff; font-size:2.0em; z-index: 10; opacity: 1; } #main-header a:hover{ color: #585858; } #main-header { position: absolute; width:100%; height:70px; top:0; background-color: rgba(0,0,0,0); z-index: 100; } #main-header ul li { display:inline; padding:20px 20px; } #main-header ul { float: right; margin-top:0px; padding:0; padding-top: 25px; padding-right: 25px; text-align: right; } #container{ width: 90%; } #lupa{ float: right; width: 40%; height: 100%; } #lupa img{516 918 width: 90px; height: 492px; float: right; padding-top: 90px; } #content_1{ float: left; height: 100%; width: 60%; } #content_container{ padding-top: 125px; height: 100%; width: 100%; padding-left: 35%; } #nadpis1{ margin-bottom: 45px; } #nadpis1 img{ width: 231px; height: 44px; } #content_1_1 a{ color: #014FC4; text-decoration: none; font-weight: 800; font-size: 25px; } #content_1_1 h2, p{ color: #2F2F2F; font-size: 25px; text-decoration: none; } #footer_left{ height: 90%; float: left; width: 40%; } .footer_1, .footer_2{ height: 100%; width: 50%; } .footer_1{ float: left; } .footer_2{ float:right; } .footer_3{ } #full_5{ height:100vh; background-color: #0F032D; bottom: 0; } .footer_bottom{ color: white; height: 10%; width: 100%; text-align: center; clear: both; bottom: 0; padding-bottom: 10px; z-index: 10; } #full_5 ul{ padding-right: 25px; padding-top: 25px; } #full_5 ul li{ padding-top: 25px; } #full_5 ul li a{ color: white; text-decoration: none; font-size: 16px; } @media only screen and (min-width: 320px) and (max-width: 768px) { html * { box-sizing: border-box; padding:0; margin:0; } html, body { height: 100%; font-family: 'Roboto', sans-serif; color:#666666; line-height: 1.7em; } body { /* Location of the image */ background-image: url(1.jpg); /* Background image is centered vertically and horizontally at all times */ background-position: center center; /* Background image doesn't tile */ background-repeat: no-repeat; /* Background image is fixed in the viewport so that it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* This is what makes the background image rescale based on the container's size */ background-size: cover; /* Set a background color that will be displayed while the background image is loading */ background-color: #464646; } #full_2, #full_3, #full_4{ position: relative; height: 100vh; width: 100%; } #full_1 { position: relative; height: 100vh; width: 100%; } #full_1 { background: black; opacity: 0.36; } #full_4 { background: magenta; } #full_2 { background: white; } #full_3 { background: lightgray; } .arrow-down { position: absolute; bottom: 10px; width: 45px; height: 45px; left: calc(50% - 16px); } .arrow-down a img { width: 100%; } #full_2 .arrow-down a img { width: 100%; display: none; } .logo{float: left; width: 30%;height: 100%;padding-top: 25px;padding-left: 25px;} .main-nav {float: right; width: 60%; height: 100%;} .menu { background-color: #373737; left: -285px; height: 100%; position: fixed; width: 285px; z-index: 5; } #main-header a{ text-decoration: none; color: #ffffff; font-size:2.0em; z-index: 10; opacity: 1; } #main-header a:hover{ color: #585858; } #main-header { position: absolute; width:100%; height:70px; top:0; background-color: rgba(0,0,0,0); z-index: 100; } #main-header ul li { display:inline; padding:20px 20px; } #main-header ul { float: right; margin-top:0px; padding:0; padding-top: 25px; padding-right: 25px; text-align: right; } #container{ width: 95%; margin-right: auto; margin-left: auto; } #lupa{ text-align: center; width: 100%; height: 100%; float: none; } #lupa img{516 918 width: 90px; height: 492px; float: none; padding-top: 0px; } #content_1{ height: 100%; width: 100%; text-align: center; } #content_container{ padding-top: 100px; height: 100%; width: 100%; padding-left: 0px; margin-bottom: 20px; } #nadpis1{ margin-bottom: 45px; } #nadpis1 img{ width: 231px; height: 44px; } #content_1_1 a{ color: #014FC4; text-decoration: none; font-weight: 800; font-size: 25px; } #content_1_1 h2, p{ color: #2F2F2F; font-size: 25px; text-decoration: none; } } 

 <!DOCTYPE html> <html> <head> <title>Add gospel Přerov</title> <link href="styles.css" rel="stylesheet" type="text/css"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'> </head> <div class="menu" > </div> <div id="wrapper"> <div id="main-header"> <div class="logo"> <a href="http://david.addagio.cz/gospel"><img src="" style="max-width: 90%; height: auto;" alt="gospel logo" /></a> </div> <!--/.logo--> <div class="main-nav"> <nav class="nav"> <ul> <li class="nav-item"><a href="index.php">Aktuálně</a></li> <li class="nav-item"><a href="#content_1">O nás</a></li> <li class="nav-item"><a href="#full_3">Kontakt</a> <li class="nav-item"><a href="#full_4">Foto/Video</a> </ul> </nav> </div> </div> <div id="full_1"> <div class="arrow-down"> <a href="#full_2"><img src="arrow_down.png" alt="arrow-down"></a> </div> </div> <div id="full_2"> <div id="container"> <div id="content_1"> <div id="content_container"> <div id="nadpis1"> <img src="where.png" alt="where"> </div> <div id="content_1_1"> <p>Už z našeho jména vyplívá, že se nacházíme ve městě Přerov. Klikněte na lupu a získáte přesnou navigaci. Jsme od Vás příliš daleko? kontaktujte nás <a href="index.html">zde</a></p> </div> </div> </div> <div id="lupa"> <a href="https://www.google.cz/maps/place/C%C3%ADrkev+%C4%8Ceskoslovensk%C3%A1+Husitsk%C3%A1/@49.4498538,17.4505903,137m/data=!3m1!1e3!4m2!3m1!1s0x0000000000000000:0x17de2d35d2ee97d6" target="_blank"><img src="lupa.png"></a> </div> </div> <div class="arrow-down"> <a href="#full_3"><img src="arrow_down_black.png" alt="arrow-down"></a> </div> </div> <div id="full_3"> <div class="arrow-down"> <a href="#full_4"><img src="arrow_down.png" alt="arrow-down"></a> </div> </div> <div id="full_4"> <div class="arrow-down"> <a href="#full_5"><img src="arrow_down.png" alt="arrow-down"></a> </div> </div> <div id="full_5"> <div id="footer_left"> <div class="footer_1"> <ul> <li><a href="#full_1">Podmínky použití</a></li> <li><a href="#full_1">Kontakty</a></li> <li><a href="#full_1">Novinky</a></li> <li><a href="#full_1">Fotky</a></li> </ul> </div> <div class="footer_2"> </div> </div> <div class="footer_3"> </div> <div class="footer_bottom"> </div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="main.js"> $('.icon-menu').click(function() { $('.menu').animate({ left: "0px" }, 200); $('body').animate({ left: "285px" }, 200); }); /* Then push them back */ $('.icon-close').click(function() { $('.menu').animate({ left: "-285px" }, 200); $('body').animate({ left: "0px" }, 200); }); }; </script> </body> </html> 

Hi,

Well, i am making a website.. it contains 5 divs , (full_1, full_2, full_3, full_4, full_5), all those divs are height:100vh; and width:100%; there is a

body {
  /* Location of the image */
  background-image: url(1.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;

  }

now, everything just works great, but the last div has a little line below it, like 1px line (this line looks like there is a space at the bottom, below the div, cause the line looks like the background image mentioned before...) This problem I have seen only in Microsoft Edge, but I only tried Edge and Chrome(Chrome displays it really great)

Here are photos from a) Edge , b) Chrome.

Hope, you can see it...

Also... the code snippet is maybe wrong... but it could help.

PS: Site is optimized for phones and tablets. PPS: for clear look at the website, visit: http://david.addagio.cz/gospel

Answer 1

只需在底部给出1px的相同颜色的boxshadow

box-shadow: #0f032d 0px 1px 0;