Добавить стили в тег abbr в IE

Автор：Eve Cole Время обновления：2009-05-31 00:31:34

Введение

<abbr> используется для добавления к аббревиатуре на веб-странице соответствующим образом помеченных тегов XHTML (Примечание переводчика: здесь аббревиатура и аббревиатура рассматриваются отдельно, диапазон сокращений больше, чем аббревиатура, для начального значения используйте тег <acronym> аббревиатура), браузер IE для Windows в настоящее время не поддерживает тег <abbr>. В IE вы можете применить CSS к <acronym>, но не к тегу <abbr>. IE будет отображать запрос атрибута заголовка тега <acronym>, но игнорировать тег <abbr>.

Эта ошибка (или функция) IE заставила некоторых пользователей веб-сайтов думать, что тег <abbr> вообще бесполезен, и это явно неправильно. Этот тег по-прежнему корректно обрабатывается в Mozilla и Opera, и он очень важен для читаемости и семантики веб-контента. Вот почему я продолжал искать решение и, наконец, нашел его.

Решение

Этот метод основан на простом факте: даже если IE игнорирует тег <abbr>, другие теги, вложенные в тег <abbr>, по-прежнему работают нормально. Поэтому я встроил тег внутрь <abbr>, установил атрибуты title и class для , а затем <abbr> стал таким же, как тег <acronym>.

пример кода

Взгляните на код ниже, простой пример сокращений:

Теперь сравните измененный код:

автоматический режим работы

Встроить в каждый тег <abbr> вручную очевидно невозможно — это скучно и ненужно для Mozilla и Opera. К счастью, теперь существует автоматизированный обходной путь на основе клиентских сценариев.

Возможно, вы заметили, что сокращенные слова на этой странице (Примечание переводчика: исходная страница автора) запрашиваются даже в IE, а также добавляются стили CSS (пунктирное подчеркивание и курсор мыши в форме вопросительного знака). Однако, если вы посмотрите исходный код, вы не найдете упомянутого выше тега . Это достигается благодаря простому JavaScript, загружающему эту страницу:

функция styleAbbr() {
вар oldBodyText, newBodyText, reg
если (ISIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1>$2</ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = функция(){
стильAbbr()
};

isIE = (document.all) ? правда: ложь;

Этот скрипт проверит клиентский браузер и, если это IE, заменит все теги <abbr> модифицированными версиями (встроенными ). Обратите внимание, что мы должны использовать регулярные выражения и атрибуты InternalHTML вместо стандартного метода DOM, поскольку IE не может получить атрибут <abbr> через DOM.

Стиль

Последний взгляд на CSS, используемый на этой странице. Довольно просто:

abbr, аббревиатура, span.abbr {
курсор: помощь;
нижняя граница: 1 пиксель пунктирный #000;
}

Mozilla и Opera используют селекторы атрибутов abbr и acronym, а IE использует acronym и span.abbr. В любом случае, и <abbr>, и <acronym> имеют стиль курсора мыши с вопросительным знаком (когда курсор мыши наведен) и пунктирное подчеркивание.