這天剛到公司，測試同事又在群里@我：
為什么頁面鼠標一滑過，布局就錯亂了？
以前是正常的?。?br>刷新后也是一樣
快看看怎么回事
同時還給發了一段bug復現視頻，我本地跑個例子模擬下
可以看到，鼠標沒滑過是正常的，鼠標一滑過圖片就換行了，鼠標移出又正常了。
首先說下我們的產品邏輯，我們產品的需求是：要滾動的頁面，滾動條不應該占據空間，而是懸浮在滾動頁面上面，而且滾動條只在滾動的時候展示。
我們的代碼是這樣寫：
<style>
.box {
width: 630px;
display: flex;
flex-wrap: wrap;
overflow: hidden; /* 注意?? */
height: 50vh;
box-shadow: 0 0 5px rgba(93, 96, 93, 0.5);
}
.box:hover {
overflow: overlay; /* 注意?? */
}
.box .item {
width: 200px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px;
}
img {
width: 100%;
height: 100%;
}
</style>
<div class="box">
<div class="item">
<img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
</div>
<div class="item">
<img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
</div>
<div class="item">
<img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
</div>
<div class="item">
<img src="https://p6.itc.cn/q_70/images03/20210422/229df67605934f719b5e2efe6f171d5f.jpeg" alt="">
</div>
</div>
我們使用了overflow屬性的overlay屬性，滾動條不會占據空間，而是懸浮在頁面之上，剛好吻合了產品的需求。
然后我們在滾動的區域默認是overflow:hidden，正常時候不會產生滾動條，hover的時候把overflow改成overlay，滾動區域可以滾動，并且不占據空間。
簡寫代碼如下：
.box {
overflow: hidden;
}
.box:hover {
overflow: overlay;
}
然后我們是把它封裝成sass的mixins，滾動區域使用這個mixins即可。
上線后沒什么問題，符合預期，獲得產品們的一致好評。
直接這次bug的出現。
我先看看我本地是不是正常的，我打開一看，咦，我的布局不會錯亂。
然后我看了我的chrome的版本，是113版本。
然后我問了測試的chrome版本，她是114版本。
然后我把我的chrome升級到最新114版本，咦，滑過頁面之后我的布局也亂了。
初步判斷，那就有可能是chrome版本的問題。
去網上看看chrome的升級日志，看看有沒有什么信息。
具體說明：
可以看到chrome114有了一個升級，就是把overflow:overlay當作overflow:auto的別名，也就是說，overlay的表現形式和auto是一致的。
實錘了，auto是占據空間的，所以導致鼠標一滑過，布局就亂了。
其實我們從mdn上也能看到，它旁邊有個刪除按鈕，然后滑過有個tips：
既然overflow:overlay表現形式和auto一致，那么我們得事先預留出滾動條的位置，然后設置滾動條的顏色是透明的，滑過才顯示顏色，基本上也能符合產品的需求。
代碼如下：
// 滾動條
::-webkit-scrollbar {
background: transparent;
width: 6px;
height: 6px;
}
// 滾動條上的塊
::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: #d6d6d6;
border: 1px solid transparent;
border-radius: 10px;
}
.box {
overflow: auto;
}
.box::-webkit-scrollbar-thumb {
background-color: transparent;
}
.box:hover::-webkit-scrollbar-thumb {
background-color: #d6d6d6;
}
如果有用element-ui，它內部封裝了el-scrollbar組件，模擬原生的滾動條，這個也不占據空間，而是懸浮，并且默認不顯示，滑過才顯示。
element-ui沒有el-scrollbar組件的文檔說明，element-plus才有，不過都可以用。
這次算是踩了一個坑，當mdn上面提示有些屬性已經要廢棄??了，我們就要小心了，盡量不要使用這些屬性，就算當前瀏覽器還是支持的，但是不能保證未來某個時候瀏覽器會不會廢棄這個屬性。（比如這次問題，改這些問題挺費時間的，因為用的地方挺多的。）
因為一旦這些屬性被廢棄了，它預留的bug就等著你去解決，謹記！
原文鏈接：https://juejin.cn/post/7273875079658209319
Dreamweaver進行UTF8編碼的網頁進行編輯，會出現鼠標選擇錯位，不能精確定位，這是一個非常令人煩惱的問題，看看怎樣來解決它。
我現正在用Dreamweaver 8進行網頁編輯，這個軟件最大的好處就是所見即所得，非常適合新手，但在編輯網頁的時候，我發現一個很麻煩的問題，編輯bg2312編碼的網頁時沒有問題，想定位在哪，就定位在哪，非常精準，如下圖所示：
而在進行UTF8編碼的網頁進行編輯，就會出現鼠標選擇錯位，不能精確定位，如下圖所示：
看到沒有，不說選擇了，單單在逗號后面單擊一下，光標就偏移到“如”字的后面，相差10個字符的位置，這個時候想執行選擇，也是一樣的結果，這是一個非常煩惱的bug，特別令人抓狂，但又不得不面對，那么怎樣來解決這個問題呢？請接著往下看。
回到Dreamweaver編輯的UTF8編輯頁面的代碼視圖中，點開頂部的“編輯”中，找到最正面的“首選參數”，在“首選參數”中的左邊最下面有個“字體”，點擊，右邊就可以看到字體的設置，因為現在編輯網頁的編碼是utf-8，所有選擇 Unicode，“均衡字體”選擇“宋體”，“固定字體”默認，不要管它，“代碼視圖”也同樣選擇“宋體”，后面的字體大小都是默認，分別12、10、9pt，最后點擊“確定”保存。如下圖所示：
下面來測試下有沒有效果，看下圖：
還是在原來的逗號后面單擊一下，這回非常準確，沒有出現偏移現象，證明我們的設置到位了，選擇一下試試，也沒有出現錯亂情況，OK，一切正常！
如果你覺得本篇文章對你有幫助，請點擊收藏，方便以后再次查找參考，當然如果你有這方面的問題，也可以在評論區提出，有時間一定回，最后請注意關注，點贊和強力推薦，因為我會不定期的更新文章，就當是作筆記，但也有可能解決你有這某些情況下遇到到問題！
.這是窗口化/屏幕比例/分辨率造成的問題，把屏幕比例和分辨率調整成與自己顯示器相符的即可。
2.游戲里alt+回車，將全屏設置成窗口全屏，不要全屏模式。
3.以上兩種方法都沒有解決的話，試試找到游戲啟動程序（桌面圖標），右鍵屬性→兼容→勾選高DPI設置時禁用顯示縮放。