列出所有都是DIV标签时不显示的项目

Question

我有一个cshtml页面，其中包含DIV标签中的图像列表。看起来像这样：

        <div id="ActionButtonContainer" class="containerRight">
            <div id="ActionButtonSidebar" class="sidebarRight">
                <ul style="list-style-type:none">
                    <li title="Show More"><div class="icon lefticon" onclick="openNav()" /></li>
                    <li title="Edit"><div class="icon editicon" /></li>
                    <li title="Save"><div class="icon saveicon" /></li>
                    <li title="Cancel"><div class="icon cancelicon" /></li>
                </ul>
            </div>
        </div>

当我运行上面的代码时，页面上没有任何显示。如果将其中1个元素更改为图片标签，则会突然显示所有4个项目：

        <div id="ActionButtonContainer" class="containerRight">
            <div id="ActionButtonSidebar" class="sidebarRight">
                <ul style="list-style-type:none">
                    <li title="Show More"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="icon lefticon" onclick="openNav()" /></li>
                    <li title="Edit"><div class="icon editicon" /></li>
                    <li title="Save"><div class="icon saveicon" /></li>
                    <li title="Cancel"><div class="icon cancelicon" /></li>
                </ul>
            </div>
        </div>

src是该字符串的原因是，它代表一个空白的1kb图像。如果不存在，Chrome会出于某些愚蠢的原因自动在图像周围放置边框。我尝试了src =''，src ='＃'，src ='//：0'，src ='javascript：void（0）'，它们最终都在CSS类。

我想要CSS文件中定义的图像源的原因是，当我将image标签的src更改为实际图像文件时，它拒绝正确调整大小。我和它战斗了一个小时，但我对自己的恨意还不足以继续走这条路。

任何想法，为什么所有DIV标签都没有显示？还是在Chrome中没有以更简洁，更“ hacky”的方式未定义源的情况下，如何删除图像周围的边框？

这里是CSS供参考：

.containerRight {
    clear: both;
    width: 80px;
    margin: 0 auto;
    float: right;
    position: relative;
    left: 90%;
}

.containerRight li {
    padding-bottom:5px;
}

.containerRight button {
    width: 100%;
}

.sidebarRight {
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 100px;
    left: 93%;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar2 */
    float: right;
    vertical-align: middle;
    text-align: center;
}

.icon {
    background-size: contain;
    background-repeat: no-repeat;
    height: 25px;
    width: 100%;
    cursor:pointer;
}

.editicon {
    background-image: url("../../../Images/edit.png");
}

我有一个cshtml页面，其中包含DIV标签中的图像列表。看起来像这样：

]

删除图像周围的边框：应该与outline: none一起使用。因此，据我所知，应该将它放在您的.icon css类中。

  .icon {
        outline: none;
        border: none;
        background-size: contain;
        background-repeat: no-repeat;
        height: 25px;
        width: 100%;
        cursor:pointer;
    }

但是，通常应尝试提供一个有效的链接，该链接将包含将找到的img源，并且始终在图像标签上包含alt属性，因此，当找不到图像时，将出现替代文本。 。

我试图在此处重现您的问题。我当然看不到您的本地图像，因此全部为空白，我输入了ABC，因此我真的无法重现您的问题：https://codepen.io/alexiovay/pen/qBELZzy

Answer 1

删除图像周围的边框：应该与outline: none一起使用。因此，据我所知，应该将它放在您的.icon css类中。