javascript - 带有图像的 Div 在另一个 div 上

Question

我想在右侧的菜单上显示图像，但它在 Windows 10 上的 IE 和 Microsoft Edge 上不起作用。

<div class="menuDiv">
        <ul id="menu">
            <div class="menu_image"></div>
            <li><a><img src="img/image_1.png"></a>
                <ul id="seccion_1"></ul>
            </li>
            <li><a><img src="img/report_image.png"></a>
                <ul id="seccion_2"></ul>
            </li>
        </ul>
    </div>

menuDiv使用jqueryUI的themeRoller的菜单

.menu_image
{
    right: 0px;
    position: absolute;
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
/*        background-position: 98% 0%;*/
        width: auto;
        height: auto;
}

这是它在 Chrome 和 Firefox 上的样子

这是在 IE 上的样子

如何在 IE 上显示图片？

我在jsfiddle上设置了一个类似的例子

https://jsfiddle.net/kzxfu7j4/

Answer 1

添加

.menu{
   display: relative;
}

到您的 css 或更改您的 .menu_image 如下:

.menu_image
{
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
/*        background-position: 98% 0%;*/
        width: auto;
        height: auto;
        float:right;
}

编辑: 顺便说一句，请确保 div 具有适当的高度和宽度，您可以简单地更改其高度和宽度以匹配图像的高度和宽度。