2017-01-14 257 views
0

我花了一個小時找到問題,但我仍然無法找到它。 當我在瀏覽器中放大和縮小時,一些元素正在移動,一些變得更大。對我而言,移動的元素在67%的放大位置上。是什麼讓我的頁面看起來像這樣?

#structure { 
 
\t background-color: blue; 
 
\t height: 640px; 
 
\t width: 1136px; 
 
} 
 

 
/* Starting the left side menu */ 
 
#select { 
 
\t background-image: url('http://image.prntscr.com/image/876c2fde408443e0969559dfb4130848.png'); 
 
\t height: 640px; 
 
\t width: 100px; 
 
\t border-right: 4px solid rgba(69, 39, 28, 0.9); 
 
\t float: left; 
 
} 
 

 
.menu { 
 
\t height: 40px; 
 
\t width: 40px; 
 
\t margin-left: 30px; 
 
\t margin-bottom: 34px; 
 
} 
 

 
.menu img { 
 
\t height: 100%; 
 
\t width: 100%; 
 
} 
 

 
#menu1 img, #menu7 img { 
 
\t height: 120%; 
 
\t width: 100%; 
 
} 
 

 
#menu1 { 
 
\t height: 120px; 
 
\t width: 40px; 
 
\t margin-bottom: 50px; 
 
\t margin-left: 37px; 
 
\t margin-bottom: 30px; 
 
} 
 

 
#menu1 img { 
 
\t margin-top: 7px; 
 
\t height: 95px; 
 
\t width: 28px; 
 
} 
 

 
#menu7 { 
 
\t height: 40px; 
 
\t width: 40px; 
 
\t margin-top: 85px; 
 
\t margin-left: 30px; 
 
\t margin-bottom: 25px; 
 
} 
 
/* Closing the left side menu */ 
 

 

 
/* Starting slideshow Images */ 
 

 
#slideImg img { 
 
\t position: relative; 
 
\t height: 640px; 
 
\t width: 683px; 
 
\t float: left; 
 
} 
 
/* Closing slideshow Images */ 
 

 

 
/* Starting the quests side */ 
 
#quests { 
 
\t background-image: url('http://image.prntscr.com/image/46c0de9e96474d5686b175d7cc343516.png'); 
 
\t height: 640px; 
 
\t width: 350px; 
 
\t float: left; 
 
} 
 

 
#seasonLevel { 
 
\t height: 62px; 
 
\t width: 62px; 
 
\t z-index: 60px; 
 
\t float: left; 
 
\t position: relative; 
 
\t top: 8px; 
 
\t left: 10px; 
 
} 
 

 
#seasonLevel div { 
 
\t position: relative; 
 
\t top: 4px; 
 
\t border: 3px solid white; 
 
\t border-radius: 50%; 
 
\t height: 60px; 
 
\t width: 60px; 
 
} 
 

 
#seasonLevel div div { 
 
\t border: 1px solid white; 
 
\t border-radius: 50%; 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t margin: auto; 
 
} 
 

 
#seasonLevel div div p { 
 
\t text-align: center; 
 
\t font-family: sans-serif; 
 
\t font-size: 30px; 
 
\t color: rgba(255, 255, 255, 0.8); 
 
\t position: relative; 
 
\t bottom: 22px; 
 
} 
 

 
#seasonDesc { 
 
\t width: 220px; 
 
\t height: 65px; 
 
\t position: relative; 
 
\t left: 23px; 
 
\t top: 12px; 
 
\t float: left; 
 
\t font-family: sans-serif; 
 
} 
 

 
#seasonDesc p:first-child { 
 
\t font-size: 32px; 
 
\t font-weight: bold; 
 
\t position: relative; 
 
\t bottom: 30px; 
 
\t color: white; 
 
\t font-weight: 600; 
 
} 
 

 
#seasonDesc p:last-child { 
 
\t font-size: 23px; 
 
\t font-weight: 600; 
 
\t position: absolute; 
 
\t top: 25px; 
 
\t color: #DEDEDE; 
 
\t opacity: 0.7; 
 
} 
 

 
#sunCont { 
 
\t background-color: rgba(0, 0, 0, 0.3); 
 
\t z-index: 50px; 
 
\t height: 47px; 
 
\t width: 314px; 
 
\t position: relative; 
 
\t right: 8px; 
 
\t top: 33px; 
 
\t z-index: 30px; 
 
\t float: right; 
 
} 
 

 
.sun { 
 
\t background-color: black; 
 
\t opacity: 0.4; 
 
\t width: 28px; 
 
\t height: 28px; 
 
\t border-radius: 50%; 
 
\t margin-left: 0.01px; 
 
\t margin-top: 9px; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t left: 5px; 
 
\t border: 1px solid white; 
 
} 
 

 
.rs { 
 
\t height: 145px; 
 
\t width: 331px; 
 
\t position: relative; 
 
\t background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png'); 
 
\t display: inline-block; 
 
\t background-size: 100%; 
 
\t margin-bottom: 14px; 
 
\t border: 0.2px solid black; 
 
\t box-shadow: 0px 2px 0px black; 
 
\t float: right; 
 
} 
 
/* Closing the quest side */
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>VainGlory</title> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <link href='style.css' rel = 'stylesheet' type = 'text/css'> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id = 'structure'> 
 

 
<!--LS--> 
 

 
\t \t \t <div id = 'select'> 
 
\t \t \t \t <div id = 'menu1'> <img src = 'http://image.prntscr.com/image/ddc0c251ac4d4ca6970047e49f575ff4.png'> </div> 
 
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/421e8f797e5e4af5abd56e2c84c48884.png'> </div> 
 
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/4cb6887febbd4bc7a6f8242688165a9c.png'> </div> 
 
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/64bf74940f2449de99f8eedd0115dc55.png'> </div> 
 
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/10dd330b566d4b1d9cedc7793c67460b.png'> </div> 
 
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/2f4fdfd4a3964536a84689e5316c04e8.png'> </div> 
 
\t \t \t \t <div id = 'menu7'> <img src = 'http://image.prntscr.com/image/ac57c5f7b73f44b8aa92c58a2289cff8.png'> </div> 
 
\t \t \t </div> 
 

 
<!--MID--> 
 

 
\t \t \t <div id = 'slideImg'> 
 
\t \t \t \t <div> <img src = 'http://image.prntscr.com/image/1025277995cb442a950a05fe3b168614.jpg'> </div> 
 
\t \t \t </div> 
 

 
<!--RS--> 
 

 
\t \t \t <div id = 'quests'> 
 
\t \t \t \t <div class="rs"> 
 
\t \t \t \t \t <div id="seasonLevel"> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t \t \t <p>10<p> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id = 'seasonDesc'> 
 
\t \t \t \t \t \t <p>Autumn 2016</p> 
 
\t \t \t \t \t \t <p>Remaining: <span id='time'></span></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div id="sunCont"> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="sun"> 
 

 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="rs"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="rs"> 
 

 
\t \t \t \t </div> 
 
\t \t \t \t <div class="rs"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
<!--CLOSE--> 
 

 
\t \t </div> 
 
\t \t <script src="javas.js"></script> 
 
\t </body> 
 
</html>

回答

0

從快看,它看起來好像這個問題是從邊境進入被錯誤地呈現。據我所知,有沒有真正的瀏覽器的方式來顯示半個像素(例如:0.2px在RS類),

.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。這個數學對我來說有點複雜,但如果你真的想知道 - 我可以研究它!

我的建議是確保您的任何邊框都是整數,或者將您的元素設置爲「邊框」而不是默認設置,從而爲元素添加寬度。

+0

非常感謝!而且,如果你願意並且有足夠的時間,想知道這件事真的有效,那將是一件很棒的事情。 –

相關問題