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>
答案 0 :(得分:0)
我有同样的问题,以后需要花费数小时和数小时研究它是不可修复的。据我所知,这是由于Chrome平台以及它如何“解码”网页。