Элементы списка, не отображаемые, когда все они DIV-теги

Question

У меня есть страница cs html со списком изображений в тегах 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>

Когда я запускаю приведенный выше код, на странице ничего не появляется. Если заменить один из элементов на тег изображения, внезапно появляются все 4 элемента:

Причина, по которой sr c - это та строка, которая представляет пустое изображение размером 1 КБ. Если этого нет, Chrome автоматически поставит границу вокруг изображения по какой-то глупой причине. Я попытался src = '', src = '#', src = '//: 0', src = 'javascript: void (0)', все они в конечном итоге показывают разбитое изображение поверх определенного изображения в классе CSS.

Причина, по которой я хочу определить источник изображения в файле CSS, что при изменении sr c тега изображения на фактический файл изображения он отказывается в размере должным образом. Я боролся с этим в течение часа, и я не ненавижу себя настолько, чтобы продолжать идти по этому пути.

Есть идеи, почему ни один из элементов не отображается, когда это все теги DIV? Или как убрать границу вокруг изображения, когда источник не определен в Chrome более элегантным и менее «хакерским» способом?

Вот 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");
}

Answer 1

Удалить рамку вокруг изображения: должно работать с outline: none. Поэтому, насколько я понимаю, ваша проблема должна быть помещена в ваш .icon css класс.

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

Однако, как правило, вы должны попытаться предоставить действительную ссылку с источником img, который будет найден. и всегда включайте alt -атрибут в тег изображения, так что будет альтернативный текст, когда изображение не может быть найдено.

Я попытался воспроизвести вашу проблему здесь. Конечно, я не вижу ваши локальные изображения, поэтому все пусто, и я набрал AB C, поэтому я не могу воспроизвести вашу проблему: https://codepen.io/alexiovay/pen/qBELZzy