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具有合适的高度和宽度，您只需更改其高度和宽度即可匹配图像的高度和宽度。

Answer 2

试试这个：

.menu_image
{
        position: absolute; z-index: 9999;   
        content: url(../../../../../lib/img/image_logo.png);
        background-repeat: no-repeat;
        width: auto;
        height: auto;
        float:right;
}

如果这不起作用，也许这就是问题的“内容”

Answer 3

我找到了一个解决方案，我只是设置＆＃34;：之前＆＃34;在课程menu_image上工作

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

Answer 4

问题在于您的content CSS属性。这仅在应用于::before或::after psudo-elements时才有效：

https://developer.mozilla.org/en/docs/Web/CSS/content

您有两种选择：

1）如果图片在内容的上下文中很重要（因此您肯定希望所有用户都能看到它），只需在标记中添加<img>即可。

此外，由于您使用绝对定位来定位图像，因此添加实际<img>标记并将其直接放置而不是定位空div元素对我来说更有意义。将图像设置为背景。

如果图像代表导航按钮，请使用此方法1。

2）如果图片对内容上下文不重要，您可以使用以下方式将其添加为常规方式的背景图片：

background-image:url(...);

https://jsfiddle.net/rwhxpmfm/

背景图片存在辅助功能问题（例如，当网页打印在纸上时，它们不包含在内，而且屏幕阅读器无法访问它们......但屏幕阅读器可以访问<img>元素的alt属性）所以只有在它只是用于装饰而不是内容的上下文的一部分时才使用它们。

将图像划分为另一个div

4 个答案: