以下代码在Safari中不起作用,但在IE中正常工作。
<style>
.my
{
background:url("../../myproject/images/add.gif");
width:100%;
height:22px;
background-repeat: no-repeat;
}
</style>
<span class="my">
</span>
答案 0 :(得分:3)
默认情况下,span
元素为display: inline
,因此height
和width
属性不适用于此。
由于它没有明确的尺寸,也没有内容,因此它被渲染为0乘以0.这不会留下任何空间让它具有可见的背景。
使用其他元素(默认情况下为块),或将显示属性更改为适用于高度和宽度的元素以使其生效。
也就是说,如果您只是创建一个没有内容的框,那么您很可能首先使用img
元素。
答案 1 :(得分:2)
如果IE工作且Safari(和Firefox)没有,那可能意味着IE不符合标准。
跨度,一方面,不能有宽度和高度。一些早期的IE版本实际上让你有宽度和高度。
因此您可以将范围更改为div来查看。
另外,总是使用现代的doctype,例如HTML 4.01或XHTML 1.0,以便IE尝试使用更标准的渲染方法。
答案 2 :(得分:2)
使用backgound-image: url("../../myproject/images/add.gif");
或使用background
快捷键,以颜色开头:background:transparent url(...) no-repeat;
添加display:block;
将允许您设置span元素的高度和宽度,但它将不再与其他文本对齐。
答案 3 :(得分:0)
您应该使用background-image: url(...);
查看here