Разница отображения css в браузерах

@cocacoca · Регистрация: 04.04.2011

Студворк — интернет-сервис помощи студентам

Господа хорошие! пожалуйста, разъясните в чем дело:
Вставил картинку и сделал ее гипперссылкой;
расскрасил рамку картинки в зеленый цвет, а рамку ссылки в синий;
- в браузере IE все показывает как я и планировал - зеленая рамка картинки окружена синей рамкой ссылки
- в браузерах FireFox и GoogleChrom синяя рамка сползает вниз
Что делать?? почему так происходит и как исправить?

В архиве имеется файл .html, .css и собственно картинка .png
Рабочий стол.rar

@Karpo · 27.10.2011, 18:09

Вот, проверяй.

@cocacoca · 27.10.2011, 21:28 **[ТС]**

Не знаю подойдет ли мне такой вариант, буду пробовать.
А кто знает почему такое происходит? какова причина?

Добавлено через 30 минут
И еще одно фе в сторону Хрома и ФайрФокса
не работает подсказка к картинке.
Так что вопрос остается открытым...

Добавлено через 29 минут
Ну может быть вам скачивать лень?
ну вот код самый елементарный - с демонстрацией ошибки:

Неужели ни кто не связывал картинки?

@DuxGeneral · 27.10.2011, 22:56

Сообщение от cocacoca

Что делать?? почему так происходит и как исправить?

советую познакомиться в нете с таким понятием как кросбраузерность, что это и как с этим бороться.

@Rikani · 28.10.2011, 10:02

Это IE дурачок, а остальные браузеры все сделали правильно.
Во-первых. Элеиент <a> является строчным(inline) элементом.
Во-вторых. Элемент <img> является строчно-блочным(inline-block) элементом.
Получается, вы ставили в строчный элемент <a> блочный элемент <img>. Чего делать нельзя. Поэтому прописываем элементу <a> display: inline-block. Почти готово. Осталось прописать элементу <img> display:block, чтобы избавиться от его "инлайновой" части, а именно от области под baseline, отведенной для "хвостиков букв" таких как "р","у" и т.д.

@cocacoca · 28.10.2011, 15:31 **[ТС]**

Rikani, спасибо за разъяснение. Действительно, сначало надо разобраться из-за чего так происходит. A IE не дурачок, он просто многое прощает.
Только вот подсказки все-равно ни в Хроме не ФайрФоксе не показываются.

@Rikani · 28.10.2011, 15:47

Не совсем понял. Какие подсказки вы имеете ввиду?

Добавлено через 10 минут
Хотя нет, понял. Имеете введу, что IE отображает содержимое атрибута "alt", а остальные браузеры нет? И правильно делают. "alt" - альтернативный текст, он должен отображаться только тогда когда отображение картинок отключено в настройках браузера или изображение не доступно. Если вы хотите всплывающую подсказку, то используйте атрибут "title".

@cocacoca · 28.10.2011, 18:33 **[ТС]**

Теперь ясно чем отличается alt от title!
А чтобы в IE неотображался alt, необходимо добавить title с пустым содержанием. Я так понимаю - сделано для тех, кто как я использует по старинке атрибут alt

@Rikani · 28.10.2011, 18:55

Атрибут alt пишут всегда. Его просто оставляют пустым, если не нужен.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@cocacoca 1 / 1 / 0 Регистрация: 04.04.2011 Сообщений: 10

	Разница отображения css в браузерах 27.10.2011, 17:46. Показов 1916. Ответов 8 Метки нет (Все метки) Господа хорошие! пожалуйста, разъясните в чем дело: Вставил картинку и сделал ее гипперссылкой; расскрасил рамку картинки в зеленый цвет, а рамку ссылки в синий; - в браузере IE все показывает как я и планировал - зеленая рамка картинки окружена синей рамкой ссылки - в браузерах FireFox и GoogleChrom синяя рамка сползает вниз Что делать?? почему так происходит и как исправить? В архиве имеется файл .html, .css и собственно картинка .png Рабочий стол.rar 0

@Rikani 35 / 35 / 1 Регистрация: 27.07.2011 Сообщений: 85
	28.10.2011, 10:02
	Это IE дурачок, а остальные браузеры все сделали правильно. Во-первых. Элеиент <a> является строчным(inline) элементом. Во-вторых. Элемент <img> является строчно-блочным(inline-block) элементом. Получается, вы ставили в строчный элемент <a> блочный элемент <img>. Чего делать нельзя. Поэтому прописываем элементу <a> display: inline-block. Почти готово. Осталось прописать элементу <img> display:block, чтобы избавиться от его "инлайновой" части, а именно от области под baseline, отведенной для "хвостиков букв" таких как "р","у" и т.д. 1

@cocacoca 1 / 1 / 0 Регистрация: 04.04.2011 Сообщений: 10
	28.10.2011, 15:31 [ТС]
	Rikani, спасибо за разъяснение. Действительно, сначало надо разобраться из-за чего так происходит. A IE не дурачок, он просто многое прощает. Только вот подсказки все-равно ни в Хроме не ФайрФоксе не показываются. 0

@Rikani 35 / 35 / 1 Регистрация: 27.07.2011 Сообщений: 85
	28.10.2011, 15:47
	Не совсем понял. Какие подсказки вы имеете ввиду? Добавлено через 10 минут Хотя нет, понял. Имеете введу, что IE отображает содержимое атрибута "alt", а остальные браузеры нет? И правильно делают. "alt" - альтернативный текст, он должен отображаться только тогда когда отображение картинок отключено в настройках браузера или изображение не доступно. Если вы хотите всплывающую подсказку, то используйте атрибут "title". 1

@cocacoca 1 / 1 / 0 Регистрация: 04.04.2011 Сообщений: 10
	28.10.2011, 18:33 [ТС]
	Теперь ясно чем отличается alt от title! А чтобы в IE неотображался alt, необходимо добавить title с пустым содержанием. Я так понимаю - сделано для тех, кто как я использует по старинке атрибут alt 1

@Rikani 35 / 35 / 1 Регистрация: 27.07.2011 Сообщений: 85
	28.10.2011, 18:55
	Атрибут alt пишут всегда. Его просто оставляют пустым, если не нужен. 0