Page 66 - Сила CSS3 Освой новейший стандарт
P. 66
66 • Глава 2. Облачка с текстом
top: 20px;
Страница со всеми left: -20px;
изменениями, вне- width: 0;
сенными до сих пор, height: 0;
находится в папке border-1width: 10px 20px 10px 0;
с файлами примеров, border-style: solid;
border-color: transparent #A6DADC transparent
которые вы загрузили transparent;
для этой главы, и но- }
сит название speech-
bubble_1.html. С помощью этого несложного кода мы создали бесшовное
соединение между облачками с текстом комментариев
и их хвостиками (рис. 2.11).
Рис. 2.11. Теперь все хвостики расположены и окрашены правильно
Обходные пути для IE
В IE 8 и более поздних версиях хвостик будет отображаться правильно, однако
IE 7 и более ранние версии не поддерживают генерируемое содержимое, поэтому
не смогут отобразить хвостики облачков с текстом. Мне кажется, что в этом нет
ничего страшного. Вряд ли пользователи этих браузеров, взглянув на простой пря-
моугольник с текстом, воскликнут: «Эй, погодите-ка минуточку! Почему я не вижу
маленького треугольника, торчащего из поля комментария?»
Чтобы добавить хвостики в IE 7 и предыдущих версиях, нужно вручную внести
в код HTML каждого комментария дополнительный элемент, например пустой блок
span, и превратить его в треугольник.
www.trk.kg
