IE의 abbr 태그에 스타일 추가

저자：Eve Cole 업데이트 시간：2009-05-31 00:31:34

소개

<abbr>은 웹 페이지의 약어에 적절하게 레이블이 지정된 XHTML 태그를 추가하는 데 사용됩니다. 약어), Windows용 IE 브라우저는 현재 <abbr> 태그를 지원하지 않습니다. IE에서는 CSS를 <acronym>에 적용할 수 있지만 <abbr> 태그에는 적용할 수 없습니다. IE는 <acronym> 태그의 title 속성에 대한 프롬프트를 표시하지만 <abbr> 태그는 무시합니다.

이 IE 버그(또는 기능)로 인해 일부 웹사이트 사람들은 <abbr> 태그가 전혀 쓸모가 없다고 생각하게 되었는데, 이는 분명히 잘못된 것입니다. 이 태그는 여전히 Mozilla와 Opera에서 올바르게 처리되며 웹 콘텐츠의 가독성과 의미에 매우 중요합니다. 그래서 계속해서 해결책을 찾았고, 마침내 찾았습니다.

해결책

이 방법은 간단한 사실에 기초합니다. IE가 <abbr> 태그를 무시하더라도 <abbr> 태그 내에 중첩된 다른 태그는 여전히 정상입니다. 그래서 <abbr> 안에 태그를 삽입하고, 의 제목과 클래스 속성을 설정하자 <abbr>이 <acronym> 태그와 동일해지기 시작했습니다.

코드 예

약어의 간단한 예인 아래 코드를 살펴보십시오.

이제 수정된 코드를 비교해 보세요.

자동운전

모든 <abbr> 태그에 을 수동으로 삽입하는 것은 분명히 불가능합니다. Mozilla와 Opera에서는 지루하고 불필요합니다. 다행히 이제 자동화된 클라이언트 측 스크립트 기반 해결 방법이 있습니다.

이 페이지(번역자 주: 원저자 페이지)의 약어는 IE에서도 프롬프트가 표시되고 CSS 스타일(점선 밑줄과 물음표 모양의 마우스 커서)이 추가되는 것을 눈치채셨을 것입니다. 그런데 소스코드를 보면 위에서 언급한 태그를 찾을 수 없습니다. 이는 이 페이지를 로드하는 간단한 JavaScript 덕분에 달성됩니다.

함수 styleAbbr() {
var 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) ? true:false;

이 스크립트는 클라이언트 브라우저를 확인하고 IE인 경우 모든 <abbr> 태그를 수정된 버전(내장 )으로 바꿉니다. IE는 DOM을 통해 <abbr> 속성을 얻을 수 없기 때문에 표준 DOM 메서드 대신 정규식과 innerHTML 속성을 사용해야 합니다.

스타일링

이 페이지에 사용된 CSS를 마지막으로 살펴보세요. 아주 간단합니다:

abbr, 약어,span.abbr {
커서: 도움말;
테두리 하단: 1px 점선 #000;
}

Mozilla와 Opera는 abbr 및 약어 속성 선택기를 사용하고 IE는 약어 및span.abbr을 사용합니다. 그럼에도 불구하고 <abbr>과 <acronym>은 모두 물음표 마우스 커서(마우스가 위에 있을 때)와 점선 밑줄로 스타일이 지정됩니다.