如何停止浏览器将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;
}