边缘浏览器上重叠div上的边距和填充-Java 学习之路

让我先说一下，我知道为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％以使其在图像上方 . 然后我减少底部边距，以便页面不会得到滚动条 . 我认为保证金底部正在搞乱资源管理器 . 但是，如果我把它拿出来，那么它在Chrome上显示效果不佳 . 我玩边缘和填充，但我不是正确的 .

边缘处理CSS的哪个部分有所不同？我可以使用哪种替代方案？有没有办法将一个div叠加在另一个跨浏览器兼容的div上 .

编辑：为清楚起见，这里有一些图片 .

以下是该网站在Chrome上的外观：

你可以看到有一个主图像，从导航栏淡入图像 . 这也是我想在Edge工作的原因 .

这就是目前的情况：

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>

这是有效的：

回复于 2024-04-29T03:47:08+08:00

我生命中第一次可以说：“ Explorer/Edge are right! ”

First and more important thing ：您的网页存在巨大的HTML问题 . 没有 <body> 标签， <head> 在页脚附近， <style> 标签可以自由移动到处...不，你必须使用正确的结构（为此我认为资源管理器是正确的给你一个白页;-)） .

<!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>

Second thing ：请（请!!），不要使用 <table> 来创建布局！我们在2018年，我们可以使用其他解决方案（flexbox，CSS网格布局......你想要的一切，但不是 <table> ） .

Third thing ：你有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>

回复于 2024-04-29T03:47:08+08:00

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

2 回答

相关问题