關於頁面縮放時css錯亂的處理方法---之一

這幾天遇到一個問題，就是在作網頁的時候，頁面縮放時，佈局就亂了，原來的樣子不會跟隨縮放的放大或者縮小進行改變，直接致使的後果，就是頁面很難看，沒法使用

以前雖然寫了代碼，可是一直沒有注意到縮放後頁面的效果會改變的事情，這幾天仍是別人發現了，來告訴我有這種問題，我才知道，感受有點失敗啊；關鍵的問題是，即便知道了問題，還不知道怎麼處理，這纔是最大的問題；

現象以下：

縮放後，有一部風圖標的位置就不夠了，被擠了下來

css 以下：使用元素的固定寬度

1  position: relative; 2  float: left; 3  width: 118px; 4  height: 124px; 5  border: 1px solid #eeeeee;

 

 

 

想了好久，都沒有想到，仍是與朋友聊天的時候，才找到解決方法：以下：設置成包含邊框的元素，按照百分比來佈局

 1  position: relative;  2  float: left;  3  width: 10%;  4  height: 124px;  5  border: 1px solid #eeeeee;  6  box-sizing: border-box;  7  -moz-box-sizing: border-box;  8  -webkit-box-sizing: border-box;  9  -o-box-sizing: border-box; 10  -ms-box-sizing: border-box;

 

 

縮放也不會變化了，搞定.....