css 图像未在 Safari 中显示？答案

【问题标题】：css image in not showing in safari?css 图像未在 Safari 中显示？
【发布时间】：2011-03-09 00:01:17
【问题描述】：

以下代码不能在 safari 中运行，但在 IE 中可以正常运行。

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

</span>

【问题讨论】：

标签： css internet-explorer image safari

【解决方案1】：

如果 IE 可以正常工作而 Safari（和 Firefox）不能正常工作，那可能意味着 IE 不符合标准。

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

这样您就可以将 span 更改为 div 来查看。

另外，请始终使用现代文档类型，例如 HTML 4.01 或 XHTML 1.0，以便 IE 尝试使用更标准的呈现方法。

【讨论】：

【解决方案2】：

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

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

【讨论】：

仅使用带有图像的背景将清除它可能继承的任何背景颜色...我一直使用仅带有图像的背景。
@animunson 你的权利，但如果你有一个透明的 png 或 gif，为背景快捷方式定义透明颜色会更安全一些。以防浏览器没有（Safari 将背景颜色设置为“初始”，而 FF 如果未定义则将其设置为“透明”）。
@animunson，我收回了 curses webkit 检查器计算的值实际上在未定义时是透明的。

【解决方案3】：

你应该使用background-image: url(...); 见here

【讨论】：

你读过这个吗：It does not matter if one of the property values are missing, as long as the ones that are present are in this order. 输入“background”比输入“background-image”要短，而且完全没有区别。
是的，这又是 W3Schools 的废话。这是一种可怕的资源，而这只是其中的一个错误。（在这种情况下使用 background-image 无济于事，但使用简写版本（重置未指定的属性）和单个属性之间存在差异）。
@David Dorward：我不认为这是一个错误，只是缺少他们可能应该添加的信息。
既然他们说“没关系”，而且它确实很重要，那么我会认为这是一个错误。

【解决方案4】：

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

因为它没有明确的尺寸，也没有内容，所以它被渲染为 0 x 0。这不会为它留下任何空间来拥有可见的背景。

使用不同的元素（默认为块的元素），或将显示属性更改为适用于高度和宽度的元素以使其工作。

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

【讨论】：

有些人将图像作为背景元素，这样它们周围的文字就不会被选中。这有点矫枉过正，但无论如何。