HTML #

웹 표준 #

웹 브라우저별 알려진 버그 #

인터넷 익스플로러 #

인터넷 익스플로러에서 객체의 배경이 투명하면 마우스 이벤트를 받지 못하는데, 자신보다 z-index가 낮은 객체중에 배경이 있는 객체가 있으면 그 객체와 겹치는 영역은 마우스 이벤트를 받습니다. 아래의 예제를 인터넷 익스플로러에서 확인해주세요. 무툴스(Mootools) 라이브러리가 필요합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
    .Box {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px solid #000;
    }
    #Hello {
        left: 10px;
        top: 10px;
        background-color: #bbf;
    }
    #World {
        left: 100px;
        top: 100px;
    }
</style>
<script type="text/javascript" src="vendor/mootools/mootools.js"></script>
<script type="text/javascript">
    window.onload = function() {
        document.addEvent( "mousedown", function( event ) {
            event = new Event( event );
            alert( event.target.id );
        } );
    }
</script>
</head>
<body>
    <div id="Hello" class="Box">
        Hello
    </div>
    <div id="World" class="Box">
        World
    </div>
</body>
</html>

파이어폭스 #

부모 객체의 스타일에 position: absolute와 overflow: hidden 속성이 모두 있을 경우, 자식 객체의 offsetLeft 값이나 offsetTop 값이 부모의 border크기만큼 -가 됩니다. 파이어폭스 offsetLeft, offsetTop 버그

참고 #

Comparison of layout engines (DOM) - 각 브라우저의 엔진별 DOM 지원내역이 정리되어있는 페이지 입니다. 인터넷 익스플로러는 Trident 엔진, 파이어폭스는 Gecko 엔진입니다. 여기서 DOM level2의 getElementById 함수는 다음과 같은 버그가 있다고 보고되어 있습니다. Id versus name when using getElementById - 특정 상황에서 id로 검색하기 전에 name으로 먼저 검색해버림.
Comparison of layout engines (CSS) - 각 브라우저의 엔진별 CSS 지원내역이 정리되어있는 페이지 입니다. 인터넷 익스플로러는 Trident 엔진, 파이어폭스는 Gecko 엔진입니다.
Comparison of layout engines (ECMAScript) - 각 브라우저의 엔진별 JavaScript 지원내역이 정리되어있는 페이지 입니다. 인터넷 익스플로러는 Trident 엔진, 파이어폭스는 Gecko 엔진입니다.
DOM Events - Wikipedia의 DOM Events 정리한 문서입니다.
CSS Homepage
CSS2 Specification
HTML Home Page
HTML 4.01 Specification
HTML and DHTML Reference (MSDN)
FreeCSSTemplates.org