html - Edge 浏览器上重叠 div 的边距和填充

首先让我说我知道为 Edge/Explorer 设计几乎是不可能的。但目前我遇到的情况是，Chrome/Firefox 上功能齐全的网页在 Edge 上几乎什么也看不到。

我有一张覆盖整个页面的背景图片。然后有第二个 div 应该在它上面，它在导航栏下方有一个渐变渐变。

我已删除相关部分并链接到占位符图像:

<html>
<style>
    .main-image{
        width:100%;
        height:100%;
        background-image: url("https://vignette.wikia.nocookie.net/project-pokemon/images/4/47/Placeholder.png/revision/latest?cb=20170330235552");
        background-color:#192940;
        background-size: cover;
        z-index:50;
    }

    .fade{
        position:relative;
        top:-100%;
        width:100%;
        height:20%;
        margin-bottom:-100%;
        padding:0;
        margin-top:100px;
        background: linear-gradient(#242424, transparent);
    }
</style>


<div class="main-image"></div>
<div class="fade"></div>

</html>

图像 div 应该是无冲突的。它是整页图像，如果图像加载时间过长，则有背景颜色。

我将 fade div 向上移动了 100% 以使其位于图像之上。然后我减少底部边距，这样页面就没有滚动条了。我认为 margin-bottom 是什么搞乱了 Explorer。但是如果我把它拿出来，它就不会在 Chrome 上很好地显示。我试过边距和填充，但我做错了。

边缘对 CSS 的哪一部分进行了不同的处理？我可以使用什么替代方案？有没有办法将一个 div 叠加在另一个跨浏览器兼容的 div 之上。？

编辑:为清楚起见，这里有一些图片。

这是网站在 Chrome 上的样子:

如您所见，有一个主图像，导航栏淡入图像。这也是我想在 Edge 中实现的。

这是它目前在边缘上的样子:

最佳答案

我有生以来第一次可以说:“Explorer/Edge 是对的!”

首先也是更重要的事情:您的页面存在巨大的 HTML 问题。没有 <body>标签，<head>在页脚附近，<style>标签可以随处移动...不，您必须使用正确的结构(为此，我认为 Explorer 为您提供白页是正确的 ;-))。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- put here your styles -->

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- your body with your content -->


  </body>
</html>

第二件事:请(请!!)，不要使用<table>创建布局!我们在 2018 年，我们可以使用其他解决方案(flexbox、CSS 网格布局......你想要的一切，但不是 <table> )。

第三件事:您有一个 731 KB 大小的背景图片!它太大了!你必须减轻它的重量，它不是为了打印...

好的，我们可以看到您的页面了:

我添加了 html{height:100%}并把你的 .fade div 处于绝对位置，删除所有负边距并且一切正常(我更改了您的图像以便每个人都可以在这个示例中看到它，但您可以自然地使用您的图像)。

这是页面:

html,
body {
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: bold;
	font: Arial, Helvetica, sans-serif;
}

.buffer {
	height: 35px;
}

.sidenav {
	height: 100%;
	width: 15%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #203459;
	overflow-x: hidden;
	margin-top: 0px;
	border: 0;
	padding: 0;
}

.sidenav a {
	padding: 6px 8px 6px 16px;
	text-decoration: none;
	font-size: 15px;
	color: #818181;
	display: block;
	border: 0;
	margin-top: 0;
}

.sidenav a:hover {
	color: #f1f1f1;
}

.top-nav {
	height: 100px;
	width: 200px;
	background-color: #242424;
}

.fader {
	height: 100px;
	width: 100%;
	background: linear-gradient(#242424, transparent)
}

.main-title {
	position: fixed;
	width: 100%;
	height: 100px;
	background-color: #242424;
	z-index: 10;
}

table {
	border-collapse: collapse;
}

tr,
td,
th {
	padding: 0;
	margin: 0;
	border: 0;
}

.about ul li {
	list-style: none;
	padding-left: 16px;
	padding-top: 8px;
	color: white;
	font-size: 1.4vw;
}

.nav {
	position: fixed;
	z-index: 20;
	width: 100%;
	height: 35px;
	background-color: transparent;
	padding-left: 12vw;
	margin-top: -10;
	border: 0;
}

.nav ul {
	margin: 0;
	padding: 0;
}

.nav ul li {
	list-style: none;
}

.nav ul li a {
	float: left;
	display: block;
	padding: 0px 2%;
	color: #DBD370;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.4vw;
}

.nav ul li a:hover {
	color: #E5D83D;
	margin-top: -4px;
}

.wrapper {
	display: flex;
	flex-flow: row wrap;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;
}

.main_old {
	text-align: left;
	background: deepskyblue;
	filter: blur(5px);
	margin: 0;
	padding: 0;
	border: 0;
}

.background {
	width: 100%;
	height: 100%;
	-webkit-filter: blur(2px);
	position: fixed;
	margin: 0;
	padding: 0;
	border: 0;
}

.blur_background {
	width: 100%;
	height: 111.111111%;
	top: -9.5%;
	position: absolute;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.mask {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 10;
	margin: 0px;
	margin: 0;
	padding: 0;
	border: 0;
}

.def {
	font-size: 24px;
	color: black;
}

.fade {
	position: relative;
	/*top:-100%;*/
	position: absolute;
	top: 100px;
	left: 0;
	width: 100%;
	height: 20%;
	/*margin-bottom:-100%;*/
	padding: 0;
	/*margin-top:100px;*/
	background: linear-gradient(#242424, transparent);
}

.comment {
	background: linear-gradient(#DADBEC, transparent);
}

.main-image {
	width: 100%;
	height: 100%;
	background-image: url("https://picsum.photos/1170/875");
	background-color: #192940;
	background-size: cover;
	z-index: 50;
}

<div class="main-title">
        <table>
            <tr>
                <td>
                    <video style="height:90px;" autoplay>
                        <source src="#" type="video/mp4">
                        <p style="color:white">Your browser does not support video </p>
                    </video>
                </td>
                <td>
                    <div class="about">
                        <ul>
                            <li>
                                Eco-Author
                            </li>
                        </ul>
                    </div>
                </td>

                <td>
                    <div class="nav">
                        <ul>
                            <li><a href="/about_me/">About</a></li>
                            <li><a href="/books/">Books</a></li>
                            <li><a href="/media/">Media</a></li>
                            <li><a href="/inspirations/">Inspirations/Lines of Flight</a></li>
                            <li><a href="/contact/">Contact</a></li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="main-image"></div>
    <div class="fade"></div>

关于html - Edge 浏览器上重叠 div 的边距和填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53691800/

html - Edge 浏览器上重叠 div 的边距和填充

上一篇：html - 为什么背景图像在移动设备上不会改变？

下一篇：javascript - 如何为 ul 列表添加/删除事件类？