Question

Google Chrome似乎正在改变我的身体div的属性。无论何时我去检查css都不同于原始代码。我的代码在其他浏览器中运行良好。我一直在尝试各种各样的事情，但似乎没有任何工作。我的主要问题是身体div扩大到超过100％。我从一开始就没有这个问题，最近刚刚开始发生。

html {
  background-image: url("/Pictures/background2.jpg");
  background-size: 100em auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position-y: center;
}

.header {
  position: relative;
  background-image: url("/Pictures/header.jpg");
  background-size: 100em auto;
  background-position-y: 800px;
  width: 100%;
  height: 200px;
  border-radius: 10px 10px 0px 0px;
}

.siteTitle {
  padding-left: 100px;
  padding-top: 30px;
  font-family: "Poor Richard", Calibri, Arial;
  color: #FF5D00;
  font-size: 70px;
  font-style: italic;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

div.nav {
  position: static;
  width: 100%;
  height: 40px;
  border-radius: 10px;
}

.navagation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  border-radius: 10px;
}

li a.active {
  background-color: 282828;
  color: #FF5D00;
  border-radius: 0px 0px 0px 10px;
}

li a.round {
  border-radius: 0px 0px 10px 0px;
}

li a:hover:not(.active) {
  background-color: #555;
  color: #FF5D00;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  background-color: 444242;
  text-decoration: none;
  color: #FF5D00;
}

.pageLink {
  float: left;
  background-color: 444242;
  width: 25%;
  font-family: "Poor Richard", Calibri, Arial;
  font-size: 20px;
}

.pageLink1 {
  float: left;
  background-color: 444242;
  width: 25%;
  font-family: "Poor Richard", Calibri, Arial;
  font-size: 20px;
  border-radius: 0px 0px 0px 10px;
}

.pageLink2 {
  float: left;
  background-color: 444242;
  width: 25%;
  font-family: "Poor Richard", Calibri, Arial;
  font-size: 20px;
  border-radius: 0px 0px 10px 0px;
}

.footer {
  position: absolute;
  background-color: #444242;
  width: 100%;
  height: 30px;
  border-radius: 10px;
  clear: both;
}

.footerText {
  text-align: center;
  font-family: "Poor Richard", Calibri, Arial;
  color: #FF5D00;
}

.threadbit .thread {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

.body {
  margin-top: 10px;
  border-radius: 10px;
  position: relative;
  width: 100%;
  height: 90%;
  background: rgba(211, 211, 211, .5);
  overflow: auto;
  outline-style: none;
}

.firstHeader {
  padding-top: 10px;
  padding-left: 10px;
  font-family: "Poor Richard", Calibri, Arial;
}

h2 {
  padding-left: 10px;
  font-family: "Poor Richard", Calibri, Arial;
  color: #212121;
}

p {
  padding-left: 10px;
  font-family: "Poor Richard", Calibri, Arial;
  font-size: 19px;
  color: #212121;
}

.test {
  position: relative;
  float: left;
  width: 300px;
  height: 300px;
  background-color: black;
}

.survey {
  padding-left: 0px;
}

.pictureDisplay {
  position: absolute;
  width: 100%;
  height: auto;
}

.picture {
  float: left;
  position: relative;
  width: 20%;
  height: 100px;
}

<html>
<link href="websiteStyles.css" rel="stylesheet" type="text/css" /></link>

<div class="header">
  <h1 class="siteTitle">GStraatsma Photography</h1>
</div>
<div class="nav">
  <ul class=n avagation>
    <li class="pageLink1"><a class="active" href="#home">Home</a></li>
    <li class="pageLink"><a href="#news">Photos</a></li>
    <li class="pageLink"><a href="#contact">Contact Me</a></li>
    <li class="pageLink2"><a class="round" href="#contact">About Me</a>
    </li>
  </ul>
</div>
<div class="body">
  <h2 class="firstHeader">Welcome to GStraatsma Photography</h2>
  <p>Welcome to my personal photography website! On this site, I will be posting my photography. I mostly specialize in animals, landscapes, and waterscapes; but I do also do other types of photography. I made this site to share my photography with the world
    so I would love it if you told people. I am also on Instagram <a href="https://www.instagram.com/gstraatsma_photography/?hl=en"> @gstraatsma_photography</a>, there I post the pictures I take, all of pictures I post on Instagram are on this site. My
    pictures will mostly be posted here first then on Instagram later.</p>
  <p>If you see a picture you really like, you can contact me by email at <a href="mailto: gstraatsmaphotography@gmail.com">gstraatsmaphotography@gmail.com</a> I would also love your feedback so please participate in my survey down below.</p>

  <h2>Send Me Feedback</h2>
  <div class="survey">
    <script>
      (function(t, e, n, o) {
        var s, c, r;
        t.SMCX = t.SMCX || [], e.getElementById(o) || (s = e.getElementsByTagName(n), c = s[s.length - 1], r = e.createElement(n), r.type = "text/javascript", r.async = !0, r.id = o, r.src = ["https:" === location.protocol ? "https://" : "http://", "widget.surveymonkey.com/collect/website/js/WGrYQ7RGRb8AhGTA_2FQb3bZE8CwzyYwuevWYwv59rth5ELrD3u_2FHUktOvRhl1TCxm.js"].join(""), c.parentNode.insertBefore(r, c))
      })(window, document, "script", "smcx-sdk");
    </script>
  </div>
  <h2>Featured Images</h2>
  <div class="pictureDisplay">
    <div class="picture" style="background-position:center;background-repeat:no-repeat;background-image:url(/Pictures/background2.jpg)">
    </div>
  </div>
</div>
</div>

</html>

Answer 1

我有同样的问题，以后需要花费数小时和数小时研究它是不可修复的。据我所知，这是由于Chrome平台以及它如何“解码”网页。

谷歌Chrome正在迫使我的div定位绝对和其他一些属性

1 个答案: