为什么我的HTML在Firefox和Chrome中显示不同?

时间:2019-02-05 21:47:16

标签: html css cross-browser

我最近开始练习HTML和CSS,直到现在我用 Firefox 测试了我的代码,然后决定检查我的HTML在 Chrome 中是否相同,并且没有,我不知道为什么。

* {
  box-sizing: border-box;
  font-family: "Open Sans";
}
body {
  margin: 0;
}

.MainContainer {
  position: relative;
  perspective: 1px;
  height: 100vh;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: scroll;
}

#MenuContainer {
  height: 89px;
}

#menu {
  background-color: #383e4c;
  text-align: center;
  position: fixed;
  width: 100%;
  height: 89px;
  margin-top: 0;
}
#menu > button {
  color: white;
  font-size: 20px;
  margin: 15px 10px;
  padding: 15px 25px;
  background-color: #383e4c;
  border: 1px solid #646d7c;
  transition: 0.35s;
}
#menu > button:hover {
  background-color: #49505f;
  cursor: pointer;
}
#ImageContainer {
  height: 550px;
  z-index: -1;
  transform: translateZ(-1px) scale(2.1);
}
#ImageContainer > img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 101%;
  filter: blur(4px);
}
#HeadersContainer {
  position: absolute;
  width: 100%;
  height: 550px;
  top: 89px;
  background-color: rgba(188, 143, 143, 0.3);
}
#headers {
  top: 225px;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  text-align: center;
}
#MainTitle {
  font-size: 70px;
  color: white;
  margin: 0px;
  text-shadow: 2px 2px black;
  display: block;
}
#SecondaryTitle {
  font-size: 25px;
  color: white;
  margin: 0px;
  text-shadow: 1px 1px black;
  display: block;
}
#filler {
  background-color: black;
  height: 2000px;
}
<link
  href="https://fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet"
/>
<div class="MainContainer">
  <div id="menu">
    <button>Homepage</button>
    <button>About Us</button>
    <button>Services</button>
    <button>Contact</button>
    <button>External</button>
  </div>
  <div id="MenuContainer"></div>
  <div id="ImageContainer">
    <img src="Forest.jpg" />
  </div>
  <div id="HeadersContainer">
    <span id="headers">
      <span id="MainTitle">CONQUER</span>
      <span id="SecondaryTitle">Simple Bootstrap Template</span>
    </span>
  </div>
  <div id="filler"></div>
</div>

图像容器似乎有一些溢出问题,但我不能真正地指责它。

0 个答案:

没有答案