Question

背景：我需要一个内联元素，我可以通过CSS应用宽度和高度。 AFAIK，img是目前唯一有这种行为的方式。

我宁愿不让图像指向服务器上的透明像素GIF。它可能会被缓存，但浏览器会对其进行排队，从而降低整体页面速度。其他客户可能根本就没有缓存。

PS 不，浮动div是不够的，它的行为与内联元素不同。

编辑抱歉，我应该在某处插入“跨浏览器”一词。它必须至少适用于FF≥2，IE≥7和当前的Safari。

Answer 1

您可以使用"data:" URI scheme嵌入图片。

其他替换元素也可能有效。将显示设置为“内联块”也可能值得研究。

Answer 2

你能设置：

display:inline-block;
width:50px;
height:10px;

IIRC，图像是一个“内联块”元素，因此它们可以在文本字符串中内联呈现，但仍然具有类似块的属性。

Answer 3

我想在W3C验证器意义上它将是有效，因为验证器不会检查链接是否是资源。

然而，从更广泛的意义上讲，我会说它不是。 IMG标记中需要src属性，我想说必须指向有效的图像资源。

我发现outis的“数据：URI”是最佳方式。

如果这不起作用，透明图像是您最好的选择。这是一个调用，它最多只有几个字节，并且将被大多数客户端缓存。

Answer 4

使用“about：blank”作为src将导致IE显示红色X框。这行CSS阻止了这个（在IE 8+中），但它仍然有点hacky：

img[src="about:blank"] {visibility:hidden}

Answer 5

您可以使用

标记完成相同的操作。

<p style="height: 400px; width: 400px; background-color: #ffcccc;">&nbsp;</p>

高度和宽度可设定。这应该是在常见的浏览器中，但是我无法使用它测试Safari或Chrome。

Answer 6

使用带有<span>的{{1}}标记 - 完全有效 - 然后在CSS中设置它的宽度和高度，同时应用 

使用空的display: block;标记表示屏幕阅读器会忽略它，并且在禁用样式时它不会显示为损坏的图像。

它也不会消耗更多的带宽。

： - d