Is it valid to set img src="about:blank"?

Background: I need to have an inline element to which I can apply width and height via CSS. AFAIK, img is the only way to have this behavior, currently.

I would rather not h开发者_如何学运维ave the image point to a transparent pixel GIF on the server. It may be cached, but browsers queue it nevertheless, slowing down overall page speed. Other clients might not be caching at all.

PS No, floating div is not sufficient, it behaves differently from inline elements.

EDIT Sorry, I should have inserted the term "cross browser" somewhere. It must at least be working for FF≥2, IE≥7 and current Safari.

---

You could use the "data:" URI scheme to embed an image.

Other replaced elements might also work. Setting display to "inline-block" might also be worth looking into.

---

Can you set:

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

IIRC, images are an "inline block" element, thus they can be rendered inline in text strings, but still have block-like properties.

---

I guess it will be valid in the W3C validator sense, because the validator does not check whether the link is a resource or not.

However, valid in the broader sense, I would say it is not. An src attribute is required in the IMG tag, and I would say must point to a valid image resource.

I find outis`s "data: URI" idea the best way.

If that doesn't work, a transparent image is your best bet. It's one call, it's a few bytes at best, and will be cached by most clients.

---

Using "about:blank" as src will cause IE to display red X-boxes. This line of CSS prevents this (in IE 8+), but it's still all a bit hacky:

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

---

You can accomplish the same thing with a

tag.

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

Height and width are settable. This should be across the common browsers, however I have not been able to test Safari or Chrome using it.

---

Use a <span> tag with a   in it - totally valid - then set it's width and height in CSS, also apply display: block;

Using an empty <span> tag means it will be ignored by screen readers and it won't show up as a broken image when styles are disabled.

It'll also not use up any more bandwidth.

:-D