时间戳

首页 > 解决方案 > 如何修复 Chrome 中的浮动页脚？

html - 如何修复 Chrome 中的浮动页脚？

问题描述

我网站的页脚在 Chrome 中“浮动”，向下滚动时会留下一个空白：在此处输入图像描述

这在 Firefox 或 Edge 中不会发生。检查 CSS 和 HTML 结构，未发现任何异常 - 下面提供了相关部分。有什么补救措施吗？

网站：https ://dragonnotes.org

html {margin: 0; height: 100%}
body {margin: 0; height: 100%}
* {box-sizing: border-box;}
body {font-family: Arial; margin: 0;}

.footdiv6{
background: rgba(145,145,173,1);
background: -moz-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(145,145,173,1)), color-stop(10%, rgba(80,80,131,0.8)), color-stop(12%, rgba(67,67,122,0.81)), color-stop(25%, rgba(44,44,130,0.88)), color-stop(32%, rgba(43,43,132,0.92)), color-stop(39%, rgba(42,42,135,0.95)), color-stop(49%, rgba(40,40,138,0.96)), color-stop(100%, rgba(1,1,36,1)));
background: -webkit-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: -o-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: -ms-linear-gradient(top, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
background: linear-gradient(to bottom, rgba(145,145,173,1) 0%, rgba(80,80,131,0.8) 10%, rgba(67,67,122,0.81) 12%, rgba(44,44,130,0.88) 25%, rgba(43,43,132,0.92) 32%, rgba(42,42,135,0.95) 39%, rgba(40,40,138,0.96) 49%, rgba(1,1,36,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9191ad', endColorstr='#010124', GradientType=0 );
}

.htp04{height:40px} .wi10{width:100%} .fs09{font-size:90%}
.wlink /* white color, hover-only underline */
<html>
<head><!-- meta, link, title, script code--></head>
<!-- div code -->

<body>
<!-- div, a, img, li code-->
<!-- script code (JS); nothing fancy, just buttons-->
</body>

</html> 
<!-- header & footer implemented via PHP, e.g.
<?php include("PHP/header.php"); ?>  -->

<!-- complete footer code -->
<div style="transform:translateY(10px); margin-top:-10px" class="footdiv6 htp04 wi10">
<div class="fs09" style="margin-left:50px; margin-top:12px; color:white; float:left; font-weight:700">
Dragon Notes, &nbsp; Est. 2018 &ensp; &emsp; <a href="About.php" class="wlink">About</a></div>
<h4  class="fs09" style="margin-right:50px; margin-top:12px; margin-bottom: 0; color:white; float:right;">By OverLordGoldDragon</h4></div>

标签： htmlcssgoogle-chrome

解决方案

页脚中的<h4>元素插入了一个边距底部（仅在 Chrome 中有效） - 一旦设置为零，间隙就会被骑乘。

推荐阅读