我花了一个小时才找到问题，但我仍然无法找到它。 当我在浏览器中放大和缩小时，一些元素正在移动，一些元素变大。对我来说，正在移动的元素处于67％缩放的意思位置。
#structure {
background-color: blue;
height: 640px;
width: 1136px;
}
/* Starting the left side menu */
#select {
background-image: url('http://image.prntscr.com/image/876c2fde408443e0969559dfb4130848.png');
height: 640px;
width: 100px;
border-right: 4px solid rgba(69, 39, 28, 0.9);
float: left;
}
.menu {
height: 40px;
width: 40px;
margin-left: 30px;
margin-bottom: 34px;
}
.menu img {
height: 100%;
width: 100%;
}
#menu1 img, #menu7 img {
height: 120%;
width: 100%;
}
#menu1 {
height: 120px;
width: 40px;
margin-bottom: 50px;
margin-left: 37px;
margin-bottom: 30px;
}
#menu1 img {
margin-top: 7px;
height: 95px;
width: 28px;
}
#menu7 {
height: 40px;
width: 40px;
margin-top: 85px;
margin-left: 30px;
margin-bottom: 25px;
}
/* Closing the left side menu */
/* Starting slideshow Images */
#slideImg img {
position: relative;
height: 640px;
width: 683px;
float: left;
}
/* Closing slideshow Images */
/* Starting the quests side */
#quests {
background-image: url('http://image.prntscr.com/image/46c0de9e96474d5686b175d7cc343516.png');
height: 640px;
width: 350px;
float: left;
}
#seasonLevel {
height: 62px;
width: 62px;
z-index: 60px;
float: left;
position: relative;
top: 8px;
left: 10px;
}
#seasonLevel div {
position: relative;
top: 4px;
border: 3px solid white;
border-radius: 50%;
height: 60px;
width: 60px;
}
#seasonLevel div div {
border: 1px solid white;
border-radius: 50%;
height: 50px;
width: 50px;
margin: auto;
}
#seasonLevel div div p {
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
position: relative;
bottom: 22px;
}
#seasonDesc {
width: 220px;
height: 65px;
position: relative;
left: 23px;
top: 12px;
float: left;
font-family: sans-serif;
}
#seasonDesc p:first-child {
font-size: 32px;
font-weight: bold;
position: relative;
bottom: 30px;
color: white;
font-weight: 600;
}
#seasonDesc p:last-child {
font-size: 23px;
font-weight: 600;
position: absolute;
top: 25px;
color: #DEDEDE;
opacity: 0.7;
}
#sunCont {
background-color: rgba(0, 0, 0, 0.3);
z-index: 50px;
height: 47px;
width: 314px;
position: relative;
right: 8px;
top: 33px;
z-index: 30px;
float: right;
}
.sun {
background-color: black;
opacity: 0.4;
width: 28px;
height: 28px;
border-radius: 50%;
margin-left: 0.01px;
margin-top: 9px;
display: inline-block;
position: relative;
left: 5px;
border: 1px solid white;
}
.rs {
height: 145px;
width: 331px;
position: relative;
background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
border: 0.2px solid black;
box-shadow: 0px 2px 0px black;
float: right;
}
/* Closing the quest side */<!DOCTYPE html>
<html>
<head>
<title>VainGlory</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='style.css' rel = 'stylesheet' type = 'text/css'>
</head>
<body>
<div id = 'structure'>
<!--LS-->
<div id = 'select'>
<div id = 'menu1'> <img src = 'http://image.prntscr.com/image/ddc0c251ac4d4ca6970047e49f575ff4.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/421e8f797e5e4af5abd56e2c84c48884.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/4cb6887febbd4bc7a6f8242688165a9c.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/64bf74940f2449de99f8eedd0115dc55.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/10dd330b566d4b1d9cedc7793c67460b.png'> </div>
<div class = 'menu'> <img src = 'http://image.prntscr.com/image/2f4fdfd4a3964536a84689e5316c04e8.png'> </div>
<div id = 'menu7'> <img src = 'http://image.prntscr.com/image/ac57c5f7b73f44b8aa92c58a2289cff8.png'> </div>
</div>
<!--MID-->
<div id = 'slideImg'>
<div> <img src = 'http://image.prntscr.com/image/1025277995cb442a950a05fe3b168614.jpg'> </div>
</div>
<!--RS-->
<div id = 'quests'>
<div class="rs">
<div id="seasonLevel">
<div>
<div>
<p>10<p>
</div>
</div>
</div>
<div id = 'seasonDesc'>
<p>Autumn 2016</p>
<p>Remaining: <span id='time'></span></p>
</div>
<div id="sunCont">
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
<div class="sun">
</div>
</div>
</div>
<div class="rs">
</div>
<div class="rs">
</div>
<div class="rs">
</div>
</div>
<!--CLOSE-->
</div>
<script src="javas.js"></script>
</body>
</html>
答案 0 :(得分：1)
.rs {
height: 145px;
width: 331px;
position: relative;
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
border: 0.2px solid black;
}
此代码将发挥作用！
答案 1 :(得分：0)
从快速看，看起来问题来自于边框被错误地渲染。据我所知，浏览器不能显示半个像素（例如：rs类中的0.2px），
.rs {
height: 145px;
width: 331px;
position: relative;
background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
display: inline-block;
background-size: 100%;
margin-bottom: 14px;
**border: 0.2px solid black;** <-- This here
}
如果你添加
，你会注意到* {
box-sizing: border-box;
}
（出于测试目的，这样做是为了确保文档中的每个元素都显示元素本身的边框，而不是突出显示框的宽度。）
编辑：如果将此框大小调整样式添加到.rs类和#select id，则应解决问题。这两个都有定义的边框，这些边框比你最初考虑的宽度大。
问题解决了，只是在右侧显示一些蓝色。 （这是有意义的，因为我们改变了内部对象的宽度）
我认为它在67％变焦中正确显示的原因是因为0.5像素被渲染为大约1px。对于我来说，数学有点复杂，但如果你真的想知道 - 我可以调查一下！
我的建议是确保您的任何边框都是整数，或者通过将元素的大小设置为＆＃34; border-box＆＃34;而不是为你的元素增加宽度的默认值。