背景图像 css 无法在 IE7 和 8 中显示答案

【问题标题】：Background-image css fails to display in IE7 & 8背景图像 css 无法在 IE7 和 8 中显示
【发布时间】：2013-08-30 19:11:06
【问题描述】：

由于某种原因，我在 IE 7 和 IE8 中显示背景图像时遇到问题。在 IE9 和更现代的浏览器中，它可以工作并输出以下内容：

（CSS 会在 Login 周围生成灰色边框元素）

但在 IE7 和 IE8 中，我得到的只是以下内容：

我不记得与我制作的交叉兼容的其他网站有这个问题，但我现在再次尝试避免使用图像来节省页面加载时间。

我的 CSS 如下：

#contentright .panel {
   background-image: url("/incl/images/bg_panel200.gif");
   background-repeat: no-repeat;
}


#contentright .panelbottom {
background-image: url("/incl/images/bg_panelbottom200.gif");
background-position: center top;
background-repeat: no-repeat;
}

我在 Google 上进行了快速搜索，之前的一些 Stack Overflow 答案建议将 CSS 修改为以下格式：

 background: url('/incl/images/bg_panelbottom200.gif') no-repeat center top;

但这似乎也不起作用。

提前致谢。

【问题讨论】：

为什么不使用 CSS 定义的圆角边框？
因为它们在 IE8 和 IE7 中不受支持。
最佳实践是使用 CSS 对边框进行圆角处理，并让边框优雅地降级到旧浏览器。使用这样的背景图片是一个尴尬的解决方案。
我知道。因此，为什么我不会那样做，但我担心这段代码来自客户端，他们希望在所有浏览器中以相同的方式实现它。不幸的是，他们不相信优雅的降级（这是我在所有其他项目中所做的）。

标签： css internet-explorer-8 internet-explorer-7

【解决方案1】：

尝试对元素使用display:block 并设置width 和height 也使用border:none; background-color:transparent

【讨论】：

background-color:transparent 有帮助，IE 7 和 8 无法处理像 rgba(0,0,0,0) 这样的表达式，例如，只能处理 rgb(0,0,0) 或 transparent。

【解决方案2】：

您需要指定 div 背景的height 才能在旧版本的 IE 中显示。

【讨论】：

【解决方案3】：

由于这是我的第一个响应式设计，我不得不使用媒体查询来根据屏幕/视口大小调整 css。似乎只有 "media="'screen'" 和 "media='print'" 声明在 IE7 和 IE8 中有效，这意味着我的 : 声明不起作用。这就是我的背景图像不显示的原因，因为 IE7 和8 不理解此声明，因此忽略它。感谢其他有效答案的家伙，但它们是我已经知道并尝试过的东西。

【讨论】：

是的，我注意到了这一点，因为我看到了您的列表项和您拥有的其他边框。我以为你破坏了一些CSS。因为不仅背景，而且大部分 css 都不起作用。
确实如此，虽然我不确定，因为他们还为我提供了一个我什至还没有看过的 IE 特定样式表，所以我认为这导致了其他地方的格式问题。