<button> 엘리멘트의 크로스 브라우징 문제

소스1.

<button style="
    width: 152px;
    height: 100px;
    background: red;
    border: 15px solid blue;
    overflow: hidden;
    position: absolute;
">
<div style="
    width: 122px;
    position: absolute;
    left: 0px; top: 0px;
    background: green;
">
azki's test
</div>
</button>

출력물1. (FF2)


출력물2. (IE6, IE7 도 동일하게 나온다)


출력물3. (왼쪽부터 Opera9, Safari3... 비슷함)



직관적으론 출력물3 처럼 나와야 하겠지만 불행히도 FF와 IE에서는 이상하게 나온다..
내부 div 에 top 과 left 속성을 제거해보자.. 더욱 더 가관이다.

소스2.

<button style="
    width: 152px;
    height: 100px;
    background: red;
    border: 15px solid blue;
    overflow: hidden;
    position: absolute;
">
<div style="
    width: 122px;
    position: absolute;
    background: green;
">
azki's test
</div>
</button>

출력물1. (FF2)


출력물2. (IE6, IE7 도 동일하게 나온다)


출력물3. (Opera9)


출력물4. (Safari3)



내가 원하는 것은 소스1의 출력물3과 같은 형태인데,
참 어려운것 같다 ㅡㅡ
더욱 재미난 것은... FF 의 디버깅 도구 firebug 에서 보여지는 부분이다. (소스1)

날 약올리듯이? 내가 원하는 부분을 정확하게 가르키고 있다.

일단 하나 하나를 분석해보니..

border 가 좌우 좌표를 이상하게 만드는 것 같았다. (IE와 FF에서)

그리고 FF 에서는 padding 이 또 문제를 안쪽 div의 위치를 움직이고 있었다.

소스1에서 border 와 padding 을 모두 0px 로 준 결과를 살펴보면 다음과 같다

소스3.

<button style="
    width: 152px;
    height: 100px;
    background: red;
    border: 0px;
    padding: 0px;
    overflow: hidden;
    position: absolute;
">
<div style="
    width: 122px;
    position: absolute;
    left: 0px; top: 0px;
    background: green;
">
azki's test
</div>
</button>

출력물1. (FF2)

출력물2. (IE6, IE7, Opera9, Safari3)



결국 적절한 해답은 못 찾았고..

소스3의 상태에서 FF만 따로 위치를 잡아주는 식으로 처리를 했다
left 속성: -3 , top 속성: -(높이/2+1)


부록::
프로젝트에서는 javascript 로 이런식으로 구성되어 있다 ㅡㅡㅋ

initialize: function() {//컴포넌트 객체를 생성할 때 호출됨..
        //...
        if (Prototype.Browser.Gecko) {
            this._label.setX(-3);
        }
        else {
            this._label.setX(0);
            this._label.setY(0);
        }
}
,
//...
,
onresize: function() {//사이즈 변경시에 호출됨..
        //...
        if (Prototype.Browser.Gecko) {
            this._label.setY(-1-Math.floor(height/2));
        }
}