我正在做一個 HTML 網站，我想讓側邊欄在螢屏寬度小于或等于 600 像素時消失。它適用于 Firefox，但不適用于 Chrome 或 Microsoft Edge，我不明白為什么。
這是側邊欄的代碼：
<div class="sidebar">
<ul>
<li>
<a href="https://www.facebook.com/"><img src="facebook.jpg" alt="icona facebook"></a>
</li>
<li>
<a href="https://www.instagram.com/"><img src="instagram.png" alt="icona instagram"></a>
</li>
<li>
<a href="https://www.twitter.com/"><img src="twitter.png" alt="icona twitter"></a>
</li>
</ul>
</div>
這是CSS
/* SideBar */
.sidebar{
background-color: black;
backdrop-filter: blur(10px);
position: fixed;
z-index:0;
margin-top:0;
right:0;
overflow-x: hidden;
width: 100px;
height: 100%;
padding: 20px 0;
}
.sidebar a{
padding: 6px 8px 6px 6px;
display: block;
}
.sidebar li{
display: flex;
flex-direction: column;
width: 100%;
}
.sidebar img{
width:50px;
height:50px;
padding:20px;
}
@media screen and (max-width: 600px) {
.sidebar {
display: none;
}
}
感謝您的每一個建議！
uj5u.com熱心網友回復：
我建議你這樣做：
- 前往設定
- 搜索快取
- 清除瀏覽資料
- 檢查快取的影像和檔案（過去一小時/一天）
- 清除瀏覽資料
并且請轉到您的網頁，然后按“Ctrl r”
希望對您有所幫助。謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514518.html
標籤：htmlcss网络