为什么我的背景图片在 IE7 中无法正常显示？
问题的屏幕截图：此处
问题网页：http://cure.org
违规浏览器： Internet Explorer 7
您会从屏幕截图中注意到，或者如果您在 IE7 中查看此站点，内容 div (#modal-inner-content) 的背景图像不会显示。奇怪的是，该图像显示在使用它的其他 div 中（因为它是一个精灵，所以我对 #modal-top-border 和 #modal-btm-border 使用相同的图像）。
在所有其他浏览器中，它都能正常显示，甚至在 IE8 中也是如此。我似乎无法找到我可能使用的 CSS 规则（或缺乏），而 IE7 却令人窒息。
注意：要进入模态屏幕，只需单击页面最顶部横幅上显示“登录到您的 CURE 帐户”的链接
Screenshot of the issue: here
Webpage in Question: http://cure.org
Offending browser: Internet Explorer 7
You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is used (since it's a sprite, I'm using that same image for #modal-top-border and #modal-btm-border).
In all other browsers it displays properly, and even in IE8. I cannot seem to find what CSS rule (or lack thereof) I may be using that IE7 is choking on.
NOTE: in order to get the modal screen, just click the link at the very top banner of the page that says "login to your CURE account
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
我在 IE 7 中遇到了同样的问题，使用透明的 PNG 作为
内的背景。将背景定位在 (0|0) 为我解决了这个问题：I had the same problem in IE 7 with a transparent PNG acting as a background inside a
<div>. Positioning the background at (0|0) fixed it for me:我遇到了同样的问题，带有图形背景的按钮在 IE7 中不显示。
看来 IE7 对带有边框的 HTML 元素有问题，因为设置
border-width:0为我解决了这个问题。I had the same problem, buttons with graphic backgrounds aren't displayed in IE7.
It seems that IE7 has problems with such HTML elements with borders, as setting
border-width:0solved the problem for me.我刚刚记得IE7在背景位置属性中存在混合单位的问题。所以 -636px 顶部应该是 -636px 0
I just remembered that IE7 has a problem with mixed units in the background position property. so -636px top should be -636px 0
我同意 FutureKode 的观点。 #modal-inner-content 上的背景未显示，因为 IE 认为该元素没有布局，这有时会导致其他样式声明出现问题。要触发 hasLayout，我看到的最简单的方法是将 div 设置为 width:576px （Firebug 告诉我该 div 的宽度是多少）。我假设那个盒子的宽度永远不会改变？
有关 hasLayout 及其触发因素的更多信息：http://www.satzansatz.de/cssd/onhavinglayout。 html
I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?
More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html
您是否正在使用 IE 和 png 图像的修复程序？
如果我没记错的话，大多数通过使用 IE 的
filtercss 属性来启用背景图像透明度的插件/方法都会使背景不可重复..可能是这样..
Are you using some fix for IE and png images ?
If i remember correctly, most plugins/methods to enable transparency to background images by using the
filtercss property of IE made the background non-repeatable ..It could be it ..
不知道为什么图像没有显示在 IE7 中，但这可能是一个很好的中间修复。如果图像不显示，这应该添加白色背景。
尝试将 #modal-inner-content 从：更改
为：
--- 编辑 - 不要使用上面的答案 ---
尝试将网址用引号引起来：
Not sure why the image isn't showing up in IE7, but this could be a good intermediate fix. this should add a white background if the image doesn't show up.
Try changing #modal-inner-content from:
to:
--- Edit - don't use above answer ---
Try wrapping the url in quotes:
我需要安装ie7。我的第一次尝试是为 #modal-inner-content 添加宽度
I need to install ie7. My first try would be to add a width to #modal-inner-content
使用明确规则：
Use the clear-rule: