-1
谷歌瀏覽器似乎正在改變我的身體div的屬性。每當我去檢查CSS是不同於原來的代碼。我的代碼在其他瀏覽器中工作正常。我一直在嘗試各種各樣的事情，但似乎沒有任何工作。我的主要問題是，身體div正在擴大到超過100％。我從一開始就沒有這個問題，最近纔剛剛開始。Google Chrome迫使我的div放置絕對位置和其他一些屬性
HTML代碼：
<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 = navagation>
<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: [email protected]">[email protected]</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>
CSS：
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;
}
'style =「right = 8px;」'是無效的css屬性需要「：」這行應該讀取'style =「right：8px;」如果你真的想要應用..也我不推薦使用背景圖像適用於身體，而不是 – happymacarts
我忘了刪除，我認爲這將工作，但它沒有 –
我沒有看到這種。 Chrome並不會使'
'絕對。它也絕對不會讓你的課堂「.body」。 – Rob