Question

以下代码在Safari中不起作用，但在IE中正常工作。

<style>
.my
{
background:url("../../myproject/images/add.gif");
width:100%;
height:22px;
background-repeat: no-repeat;
}
</style>
<span class="my">

</span>

Answer 1

默认情况下，span元素为display: inline，因此height和width属性不适用于此。

由于它没有明确的尺寸，也没有内容，因此它被渲染为0乘以0.这不会留下任何空间让它具有可见的背景。

使用其他元素（默认情况下为块），或将显示属性更改为适用于高度和宽度的元素以使其生效。

也就是说，如果您只是创建一个没有内容的框，那么您很可能首先使用img元素。

Answer 2

如果IE工作且Safari（和Firefox）没有，那可能意味着IE不符合标准。

跨度，一方面，不能有宽度和高度。一些早期的IE版本实际上让你有宽度和高度。

因此您可以将范围更改为div来查看。

另外，总是使用现代的doctype，例如HTML 4.01或XHTML 1.0，以便IE尝试使用更标准的渲染方法。

Answer 3

使用backgound-image: url("../../myproject/images/add.gif");或使用background快捷键，以颜色开头：background:transparent url(...) no-repeat;

添加display:block;将允许您设置span元素的高度和宽度，但它将不再与其他文本对齐。

Answer 4

您应该使用background-image: url(...);查看here

在野生动物园中没有显示css图像？

4 个答案: