IE：背景图像不显示。浏览器在悬停时重绘吗？
丹尼尔·阿普特（Daniel Apt）
因此，这是我遇到的最奇怪的IE错误之一，它正在IE11中发生！
我有一个简单的元素，如下所示：
<div class="article">
<div class="wrapper">
<header><h1>Hello World</h1></header>
<div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'> </div>
</div>
</div>
使用以下CSS：
*{margin:0;padding:0;}
.article {
height:200px;
background:aliceblue;
}
.wrapper {
height:100%;
display:table;
width:100%;
}
header, .image {
display:table-row;
width:100%;
}
header {
background:red;
height:10px;
}
.article:hover .image {
opacity:0.5;
}
对于JSFiddle，请单击此处（您可能需要单击“运行”以查看错误）
问题是，当启动页面时，我们看不到背景图像。当您将鼠标悬停在上方时.article，图像会突然出现！悬停时，图像保留（如预期）。
好像浏览器仅在用户悬停时重绘背景图像吗？
初始页面加载时图像不显示
图像显示在鼠标悬停时，图像将在此后保留
默认情况下，如何显示背景图像？
博詹德拉·拉尼雅（Bhojendra Rauniyar）
图像的关键问题是您正在display: table-row;为图像应用IE似乎不正确支持的图像。
使用display: inline-block;来代替：
.image{
display: inline-block;
height: 100%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
IE：背景图像不显示。浏览器在悬停时重绘吗？
- 2
浏览器刷新时随机全屏背景图像
- 3
CSS 背景图片链接正确；不显示在浏览器中
- 4
浏览器将不显示图像
- 5
浏览器上传到服务器时找不到背景图像？
- 6
缩放背景图像，以使浏览器窗口居中和显示宽高比
- 7
仅在 Android 浏览器上无法正确显示背景图像
- 8
无法将背景图像显示到浏览器的全屏并使其响应
- 9
CSS 背景图像 url() 在各种浏览器中未显示错误“404 not found”
- 10
CSS-自适应-调整浏览器的宽度时裁剪背景图像的左右部分
- 11
不显示背景图像
- 12
在地址栏中键入路径时，浏览器会打开图像，但不会将其显示为背景图像。为什么？
- 13
在地址栏中键入路径时，浏览器将打开图像，但不会将其显示为背景图像。为什么？
- 14
悬停时的背景图像
- 15
鼠标悬停时突出显示图像部分，以响应浏览器大小变化
- 16
在浏览器中不显示图像-React
- 17
VideoJs 控制栏在智能电视和某些移动浏览器上单击或悬停时不显示
- 18
Youtube API iframe 在浏览器刷新时不显示
- 19
Heroku不显示SCSS背景图像
- 20
visualforce背景图像不显示
- 21
<div>中的背景图像不显示
- 22
不显示本地CSS背景图像
- 23
JPanel不显示背景图像
- 24
Heroku不显示SCSS背景图像
- 25
CSS：背景图像不显示的div
- 26
部分内的背景图像不显示
- 27
IONIC - 背景图像不显示与 apk
- 28
背景图片在桌面浏览器上正确显示，在移动浏览器上未显示
- 29
上载到ASP.NET中的服务器时，浏览器中不显示图像
我来说两句