Question

让我以此开头作为开头，说我知道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应该没有争议。这是一整页图像，如果图像加载时间较长，则具有背景色。

我将渐变div向上移动100％，以使其位于图像顶部。然后，我减小了下边距，以使页面没有滚动条。我认为底边就是搞乱Explorer的原因。但是，如果我将其取出，那么它在Chrome上无法很好地显示。我玩过边距和边距，但是我走的不对。

哪个CSS部分的边缘处理方式不同？我可以使用什么替代方法？有没有一种方法可以将一个div覆盖在跨浏览器兼容的另一个div上？？

编辑：为清楚起见，这是一些图片。

这是该网站在Chrome上的外观：

如您所见，有一个主图像，从导航栏淡入图像。这也是我想在Edge中使用的功能。

这是当前边缘上的样子：

Answer 1

我有生以来第一次说：“ Explorer / Edge是对的！”

首先也是更重要的一点：您的页面存在巨大的HTML问题。否Linux标签，页脚附近的<body>标签，<head>标签可以自由移动到任何地方...不，您必须使用正确的结构（为此，我认为Explorer是正确的给你白页;-））。

<style>

第二件事：请（请！），请勿使用<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <title>Hello, world!</title> </head> <body>  </body> </html>创建布局！我们已经进入了2018年，我们可以使用其他解决方案（flexbox，CSS网格布局...您想要的一切，但不能<table>）。

第三件事：您的背景图片大小为731 KB！太大了！您必须减轻其重量，而不是为了打印...

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

我添加了<table>，并将您的html{height:100%} div放到了绝对位置，消除了所有负边距，并且一切正常（我更改了您的图片，以便在此示例中所有人都可以看到它，但是您可以使用您的，自然）。

这是页面：

.fade

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;
}

Answer 2

尝试一下：

<style>

* {
    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;
}

</style>



<div class="main-title">
    <table>
        <tr>
            <td>
                <video style="height:90px;" autoplay>
                    <source src="/static/kraak/title.mp4" 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>






<style>
.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;
    font-color: black;
    color: black;
}

.fade{
    position:absolute;
    width:100%;
    height:100px;
    top:0;
    padding:0;
    margin-top:100px;
    background: linear-gradient(#242424,transparent);
}

body {
    height:100%;
}

.comment{
    background: linear-gradient(#DADBEC, transparent);
}

.main-image{
    width:100%;
    height:100%;
    background-image: url("http://www.rouxnette.com/static/kraak/homefinalhighdef.jpg");
    background-color:#192940;
    background-size: cover;
    z-index:50;
}


</style>

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-130569684-1"></script>
    <script>
  window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

        gtag('config', 'UA-130569684-1');
    </script>

</head>






<div class="main-image"></div>
<div class="fade"></div>

这在边缘上可行：

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

2 个答案: