IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제

IE7에서(6은 확인 못해봤습니다.) fieldset에 legend가 있을때 fieldset에 bgcolor 줄경우
fieldset border 안으로만 bg가 칠해지는게 아니라 legend의 영역까지 fieldset의 bgcolor가 칠해져 버린다.


legend의 bgcolor는 textNode가 있는 부분만 칠해지기때문에 해결책이 되지 못하고
legend width:100% 해도 왼쪽영역은 여전히 fieldset bgcolor가 먹혀져 있게 된다.
여기에 margin-left:-10px;padding-right:10px 같은 방식으로 장난을 쳐보면 해결이 된 것 같아 보이지만 fieldset의 border가 사라져 버리게 된다.

(그림판 역시 최고 ㅠ,.ㅠ)

이럴경우 fieldset position을 relative로 주고 legend의 position을 absolute로 줘서 positioning을 해 주면 해결이 된다. (CSS Position 을 참고)

fieldset {
background-color:yellow;
border:1px dashed black;
margin-top:15px;
/* ie */
*position: relative;
*padding-top:15px;
}
legend {
background-color:red;
/* ie */
*position: absolute;
*top: -8px;
*left: 10px;
}

 


(참고 http://www.communitymx.com/content/article.cfm?page=1&cid=DD9F3)

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중