Действительно ли установлено значение img src= "about: blank"?

Фон: мне нужно иметь встроенный элемент, к которому я могу применить ширину и высоту с помощью CSS. AFAIK, img - единственный способ получить это поведение в настоящее время.

Я бы предпочел, чтобы изображение не отображалось в прозрачном пикселе GIF на сервере. Он может кэшироваться, но браузеры тем не менее ставят его в очередь, замедляя общую скорость страницы. Другие клиенты могут вообще не кэшироваться.

PS Нет, плавающего div недостаточно, он ведет себя иначе, чем встроенные элементы.

ИЗМЕНИТЬ Извините, я должен был где-то вставить термин "кросс-браузер". Он должен по крайней мере работать для FF & ge; 2, IE & ge; 7 и текущего Safari.

Ответы

Ответ 1

Вы можете использовать "data:" URI-схему для вставки изображения.

Другие заменяемые элементы также могут работать. Также может быть интересен настройку отображения на "встроенный блок".

Ответ 2

Можете ли вы установить:

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

IIRC, изображения представляют собой элемент "встроенного блока", поэтому они могут быть отображены inline в текстовых строках, но все еще имеют блочно-подобные свойства.

Ответ 3

Я предполагаю, что он будет действителен в смысле валидатора W3C, потому что валидатор не проверяет, является ли ссылка ресурсом или нет.

Однако, действуя в более широком смысле, я бы сказал, что это не так. Атрибут src требуется в теге IMG, и я бы сказал, должен указать на допустимый ресурс изображения.

Я считаю, что наилучшим образом использовать идею "data: URI" outis.

Если это не сработает, прозрачным будет ваш лучший выбор. Это один вызов, это в лучшем случае несколько байтов и будет кэшироваться большинством клиентов.

Ответ 4

Использование "about: blank" в качестве src приведет к тому, что IE отобразит красные X-боксы. Эта строка CSS предотвращает это (в IE 8+), но она все еще немного взломана:

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

Ответ 5

Вы можете сделать то же самое с тегом

.

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

Высота и ширина устанавливаются. Это должно быть через общие браузеры, однако я не смог проверить Safari или Chrome, используя его.

Ответ 6

Используйте тег <span> с &nbsp; в нем - полностью допустимый - затем установите его ширину и высоту в CSS, также примените display: block;

Использование пустого тега <span> означает, что он будет игнорироваться программами чтения с экрана и не будет отображаться как сломанное изображение, когда стили будут отключены.

Он также не будет использовать больше полосы пропускания.

: - D