Ответ 1
Вы можете использовать "data:" URI-схему для вставки изображения.
Другие заменяемые элементы также могут работать. Также может быть интересен настройку отображения на "встроенный блок".
Фон: мне нужно иметь встроенный элемент, к которому я могу применить ширину и высоту с помощью CSS. AFAIK, img - единственный способ получить это поведение в настоящее время.
Я бы предпочел, чтобы изображение не отображалось в прозрачном пикселе GIF на сервере. Он может кэшироваться, но браузеры тем не менее ставят его в очередь, замедляя общую скорость страницы. Другие клиенты могут вообще не кэшироваться.
PS Нет, плавающего div недостаточно, он ведет себя иначе, чем встроенные элементы.
ИЗМЕНИТЬ Извините, я должен был где-то вставить термин "кросс-браузер". Он должен по крайней мере работать для FF & ge; 2, IE & ge; 7 и текущего Safari.
Вы можете использовать "data:" URI-схему для вставки изображения.
Другие заменяемые элементы также могут работать. Также может быть интересен настройку отображения на "встроенный блок".
Можете ли вы установить:
display:inline-block;
width:50px;
height:10px;
IIRC, изображения представляют собой элемент "встроенного блока", поэтому они могут быть отображены inline в текстовых строках, но все еще имеют блочно-подобные свойства.
Я предполагаю, что он будет действителен в смысле валидатора W3C, потому что валидатор не проверяет, является ли ссылка ресурсом или нет.
Однако, действуя в более широком смысле, я бы сказал, что это не так. Атрибут src
требуется в теге IMG, и я бы сказал, должен указать на допустимый ресурс изображения.
Я считаю, что наилучшим образом использовать идею "data: URI" outis.
Если это не сработает, прозрачным будет ваш лучший выбор. Это один вызов, это в лучшем случае несколько байтов и будет кэшироваться большинством клиентов.
Использование "about: blank" в качестве src приведет к тому, что IE отобразит красные X-боксы. Эта строка CSS предотвращает это (в IE 8+), но она все еще немного взломана:
img[src="about:blank"] {visibility:hidden}
Вы можете сделать то же самое с тегом
.
<p style="height: 400px; width: 400px; background-color: #ffcccc;"> </p>
Высота и ширина устанавливаются. Это должно быть через общие браузеры, однако я не смог проверить Safari или Chrome, используя его.
Используйте тег <span>
с
в нем - полностью допустимый - затем установите его ширину и высоту в CSS, также примените display: block;
Использование пустого тега <span>
означает, что он будет игнорироваться программами чтения с экрана и не будет отображаться как сломанное изображение, когда стили будут отключены.
Он также не будет использовать больше полосы пропускания.
: - D