Question

我需要一些我正在设计的网页的帮助。该页面在我的结尾看起来很好，但在Safari浏览器上它被截断在底部。谁能告诉我为什么？如果您需要指向该站点的链接来检查元素，那么它是http://packoflaughs.us/ 我不知道是什么导致了这个问题。

这是html：

<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?
family=Amatic+SC" />
<div class="page-header style="text-align:center">       
<h1>Pack of Laughs</h1>        
<body>
<div id="expertise">
  <a href="https://www.youtube.com/channel/UCX7CesB0TNwrvDX6N9Wmw-w" 
style="text-decoration: none !important;">
<div class="Blog square">Youtube </div>
     <a href="https://www.instagram.com/packoflaughss/" style="text-
decoration: none !important;" >
<div class="About square">Instagram</div>
    <a href="https://www.facebook.com/Packoflaughs/" style="text-decoration: 
none !important;">
<div class="twitter square">Facebook</div>
    <a href="https://www.about.packoflaughs.us" style="text-decoration: none 
!important;">
<div class="youtube square">About Us</div>
    <a href="https://www.facebook.com/Packoflaughs/" style="text-decoration: 
none !important;">
 <div class="twitch square">Contact Us</div>
    <a href="https://www.gofundme.com/packoflaughs" style="text-decoration: 
none !important;">
<div class="faq square">Donations</div>
</div>
</body>
<a href="http://about.packoflaughs.us" >
<a href="mailto:packoflaughs@gmail.com" style="text-decoration: none 
!important;">

这是CSS：

h1 {
text-align:center;
font-size: 72px;
}
body {
  width:100%;
  height:100%;
  font-family: "Amatic SC";
  font-weight: 100;
  font-size:24px;
  background: #fff;
  overflow:hidden; /*removes scroll bar*/
  list-style-type: none;
}

#expertise {
  width:500px;
  height:500px;
  display:block;
  margin:0 auto;
  padding:10vh 0;
  list-style-type: none;
}

.square {
  position:relative;
  color: black;
  background-color: transparent;
  padding: 10px;
  width:48%;
  border: white solid 2px;
  margin-bottom:10px;
  display:inline-block;
  * display:inline;
  margin: 0px 3px 10px 3px;
  padding:20px;
  box-sizing:border-box;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  border-radius:2px;
  font-size: 150%;
    overflow:hidden;
  list-style-type: none;
}

.square:before {
  content:'';
  background-repeat: no-repeat;
  background-size: 100%;
  width:72px;
  height:96px;
  display:block;
  margin:0 auto;
  list-style-type: none;
}

.Blog.square:before {
  background-image: url("red.jpg");
}

.Blog.square:hover:before {
  background-image: url("green.jpg");
}

.About.square:before {
  background-image: url("blue.jpg");
}

.About.square:hover:before {
  background-image: url("orange.jpg");
}

.twitter.square:before {
  background-image: url("green.jpg");
}

.twitter.square:hover:before {
  background-image: url("red.jpg");
}

.youtube.square:before {
  background-image: url("yellow.jpg");
}

.youtube.square:hover:before {
  background-image: url("purple.jpg");
}

.twitch.square:before {
  background-image: url("purple.jpg");
}

.twitch.square:hover:before {
  background-image: url("yellow.jpg");
}

.faq.square:before {
  background-image: url("orange.jpg");
}

.faq.square:hover:before {
  background-image: url("blue.jpg");
}

.square:after {
  content: "";
  display:block;
  border-top: 0 #fff solid;
  border-bottom: 15px transparent solid;
  border-left: 15px #fff solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  z-index:-1;
  overflow:hidden;
}

.item:before, .item:hover:before, .item:hover:after {
  -webkit-transition: 0.75s all ease;
  -moz-transition: 0.75s all ease;
  -o-transition: 0.75s all ease;
  transition: 0.75s all ease;
}

Answer 1

主要问题是溢出：隐藏在CSS中的主体上声明。我在下面的代码中对此进行了修改，并调整了Body标签以包围主代码。

请记住元素末尾的结束标记。请查看https://www.w3schools.com/html/以确保HTML结构正确无误。

希望以下有帮助！坚持下去：D

h1 {
text-align:center;
font-size: 72px;
}
body {
  width:100%;
  height:100%;
  font-family: "Amatic SC";
  font-weight: 100;
  font-size:24px;
  background: #fff;
  overflow-y:auto; /*removes scroll bar*/
  overflow-x:hidden;
  list-style-type: none;
}

#expertise {
  width:500px;
  height:500px;
  display:block;
  margin:0 auto;
  padding:10vh 0;
  list-style-type: none;
}

.square {
  position:relative;
  color: black;
  background-color: transparent;
  padding: 10px;
  width:48%;
  border: white solid 2px;
  margin-bottom:10px;
  display:inline-block;
  * display:inline;
  margin: 0px 3px 10px 3px;
  padding:20px;
  box-sizing:border-box;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  border-radius:2px;
  font-size: 150%;
    overflow:hidden;
  list-style-type: none;
}

.square:before {
  content:'';
  background-repeat: no-repeat;
  background-size: 100%;
  width:72px;
  height:96px;
  display:block;
  margin:0 auto;
  list-style-type: none;
}

.Blog.square:before {
  background-image: url("red.jpg");
}

.Blog.square:hover:before {
  background-image: url("green.jpg");
}

.About.square:before {
  background-image: url("blue.jpg");
}

.About.square:hover:before {
  background-image: url("orange.jpg");
}

.twitter.square:before {
  background-image: url("green.jpg");
}

.twitter.square:hover:before {
  background-image: url("red.jpg");
}

.youtube.square:before {
  background-image: url("yellow.jpg");
}

.youtube.square:hover:before {
  background-image: url("purple.jpg");
}

.twitch.square:before {
  background-image: url("purple.jpg");
}

.twitch.square:hover:before {
  background-image: url("yellow.jpg");
}

.faq.square:before {
  background-image: url("orange.jpg");
}

.faq.square:hover:before {
  background-image: url("blue.jpg");
}

.square:after {
  content: "";
  display:block;
  border-top: 0 #fff solid;
  border-bottom: 15px transparent solid;
  border-left: 15px #fff solid;
  position:absolute;
  top:0;
  left:0;
  width:0;
  z-index:-1;
  overflow:hidden;
}

.item:before, .item:hover:before, .item:hover:after {
  -webkit-transition: 0.75s all ease;
  -moz-transition: 0.75s all ease;
  -o-transition: 0.75s all ease;
  transition: 0.75s all ease;
}

<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?
family=Amatic+SC" />
<body>
<div class="page-header style="text-align:center">       
<h1>Pack of Laughs</h1>        

<div id="expertise">
  <a href="https://www.youtube.com/channel/UCX7CesB0TNwrvDX6N9Wmw-w" 
style="text-decoration: none !important;">
<div class="Blog square">Youtube </div>
     <a href="https://www.instagram.com/packoflaughss/" style="text-
decoration: none !important;" >
<div class="About square">Instagram</div>
    <a href="https://www.facebook.com/Packoflaughs/" style="text-decoration: 
none !important;">
<div class="twitter square">Facebook</div>
    <a href="https://www.about.packoflaughs.us" style="text-decoration: none 
!important;">
<div class="youtube square">About Us</div>
    <a href="https://www.facebook.com/Packoflaughs/" style="text-decoration: 
none !important;">
 <div class="twitch square">Contact Us</div>
    <a href="https://www.gofundme.com/packoflaughs" style="text-decoration: 
none !important;">
<div class="faq square">Donations</div>
</div>

<a href="http://about.packoflaughs.us" >
<a href="mailto:packoflaughs@gmail.com" style="text-decoration: none 
!important;">
            </body>

我的页面在safari浏览器中被切断了

1 个答案: