是什么让我的页面看起来像这样？

时间：2017-01-14 22:37:45

标签： html css html5 css3

我花了一个小时才找到问题，但我仍然无法找到它。 当我在浏览器中放大和缩小时，一些元素正在移动，一些元素变大。对我来说，正在移动的元素处于67％缩放的意思位置。

＆＃13;
＆＃13; 
#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 */
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 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;而不是为你的元素增加宽度的默认值。

相关问题
最新问题