【IE BUG系列】背景图像不显示错误

营销策划 2012-02-02

作者:维尼Bernie 发于
二 2, 2012

CSS

原文:
http://haslayout.net/css/No-Background-Image-Bug

翻译 by 维尼Bernie

受影响的IE版本

IE8, IE7, IE6

症状:

当设置了背景图像在IE下不显示 (使用 background 缩写形式).

描述:

这个bug基本上都是”懒人”才会遇到的. 之所以这么说,是因为引起这个问题的原因仅仅是因为在设置background属性时漏掉空格. 有很多种漏敲空格的组合会导致这个bug, 这里我会给出一个示例: 在url()和随后的属性(比如no-repeat)之间漏写空格.

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 115px;
    background: #fff url(/pics/hl_logo.png)no-repeat;
    /* 注意这里在url()后面没有空格 */
}

在其他浏览器中这个瓢虫的背景图像可以显示, 但是IE下就显示不出来.

解决方法描述:

这个可能是最容易修改的几个IE bug之一了,只要简单的在url()后面加上空格就OK了.

以下是示例:

HTML Code:

<div></div>

CSS Code:

div {
    width: 500px;
    height: 115px;
    background: #fff url(/pics/hl_logo.png) no-repeat;
    /* 注意这里在url()后面添加了空格 */
}

好了,现在IE的世界清净了(bug不再了)!

备注

如果你有更好的方式欢迎留言添加,如果你发现本文翻译错误请发邮件给我们 trans4un[at]gmail.com ,你将成为我们的纠错贡献者

Tags:
bug
,
hasLayout系列

责编内容by:前端翻译小站 (源链)。感谢您的支持!

您可能感兴趣的

My site does not work correctly on Iphones I'm designing a responsive website and it works well on most devices. I use two ...
禁止蒙层底部页面跟随滚动 场景概述 弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,在蒙层元素中滑动的时候,滑到内容的尽头时,...
Ajax call returns & ldquo; An error h... I have a Pyrocms view where I call a controller method using jQuery Ajax, lik...
Bold calledBorder I tried doing UIManager.getDefaults().put("TitledBorder.font", Font.BOLD); ...
conflict beetwen :after selector and overflow Hi guys I've encountered a problem with css and html ( fiddle ) ...