如何停止瀏覽器將 1px 寬的圖像調整為 0px

Question

我正在嘗試將 1 像素寬的垂直圖像插入到我的網頁中，但根據瀏覽器、縮放級別或頁面上其他元素的位置，圖像通常會調整為 0 像素並消失。 我怎么能阻止這個？ 我這樣做錯了嗎？

我的 html 圖像（綠色空間只有 1 個像素的綠色。

 <IMG class="dividerImage dday3" SRC="/SafeSiteLive/images/safesite_documents/icons/greenspace.gif">

我的CSS

.dividerImage {
    float: left;
    margin-top: 50px;
    height: 50vh;
    width: 1px;
}

一些綠色垂直圖像不顯示

不同縮放級別顯示更多圖像

Answer 1

我應該使用一個空的 div 來代替，效果要好得多。

 <div class="dividingDiv"> 
     &nbsp;
 </div>

和CSS。

.dividingDiv {
    border-left: 1px solid green;
    float: left;
    height: 50vh;
    margin-top: 50px;
    width: 0;
}