IE의 abbr 태그에 style_CSS/HTML 추가

저자: JunChen 2005-5-24 9:56:57
원문: http://www.sovavsiti.cz/css/abbr.html
번역: JunChen

저작권 : 번역가 JunChen. 재인쇄를 원하시면 번역가에게 연락주시기 바랍니다.
소개

는 웹 페이지에 적절한 약어를 추가하는 데 사용됩니다. (번역자 주: 여기서는 약어와 약어를 별도로 고려합니다. 약어의 범위는 약어보다 큽니다. 의 첫 글자에는 태그를 사용하세요. 약어) XHTML 태그로 표시되어 있으며 Windows IE 브라우저는 현재 태그를 지원하지 않습니다. IE에서는 태그에는 CSS를 적용할 수 있지만 태그는 무시됩니다.

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

솔루션

이 방법은 간단한 사실에 기초합니다. IE가 태그를 무시하더라도 태그에 중첩된 다른 태그는 여전히 정상입니다. 그래서 안에 태그를 삽입하고 의 제목과 클래스 속성을 설정한 후 태그를 과 동일하게 만들었습니다.

코드 예시

약어의 간단한 예인 아래 코드를 살펴보세요.

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

CSS
자동 작업

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

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

function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = / ]*)>([^<]*)/g;
newBodyText = oldBodyText.replace(reg, ' $2');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};

isIE = (document.all) ? true:false;

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

스타일화

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

abbr, acronym,span.abbr {
커서: help;
border-bottom: 1px dashed #000;
}
Mozilla와 Opera는 abbr 및 acronym 속성 선택기를 사용하고, IE는 Use를 사용합니다. 약어 및span.abbr. 그럼에도 불구하고 및 에는 물음표 마우스 커서(마우스가 위에 있을 때)와 점선 밑줄이 표시됩니다.

기타

1. JavaScript 솔루션을 제공한 Michael Kusyn에게 감사드립니다.
2. , 태그와 둘 사이의 차이점에 대한 자세한 내용은 Craig Saila의 HTML은 약어가 아닙니다...(Evolt.org)를 참조하세요.

의견 교환에 오신 것을 환영합니다.

marek@sovavsiti.cz로 이메일을 보내주세요.