jugug.net > 파이어폭스 inline-block 버그

미디어로그

파이어폭스 inline-block 버그

웹 이야기/웹관련 팁 2009/03/13 23:00

display가 inline-block일때 overflow를 hidden으로 하면 text-align속성이 무시됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
 <style>
	#test{
		display:inline-block;
		width:400px;
		height:30px;
		background-color:#eee;
		overflow:hidden;
		text-align:center;
	}
  </style>
 </head>
 <body>
	<div id="test">
		정렬될 글자입니다.
	</div>
 </body>
</html>

이렇게 소스를 주면 브라우저 별로 결과는 이렇게 됩니다.

IE,Opera,Chrome에서의 결과.. 오페라로 올렸지만 다 똑같습니다.

Firefox에서 결과. text-align속성이 무시되었습니다.

파이어폭스도 보면 은근히 이러한 버그 많은거 같습니다. 하진 FF2때만해도 inline-block을 지원안했었으니깐요.. mozilla전용 속성을 써야 했었습니다.

그래서 해결방법은

1. overflow:hidden을 없앱니다. 만약 안의 요소가 너비를 벗어나게 되면 안되겠죠..
2. 아래와 같이 display:block속성을 가진 element를 하나 삽입하여 너비와 높이를 지정해 줍니다. 의미없는 마크업이 들어가지만 확실한 해결책이네요..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <style>
	#test{
		display:inline-block;
		width:400px;
		height:30px;
		background-color:#eee;
		overflow:hidden;
		text-align:center;
	}

	#wrap{
		width:400px;
		height:30px;
	}
  </style>
 </head>
 <body>
	<div id="test">
		<div id="wrap">정렬될 문자입니다.</div>
	</div>
 </body>
</html>

'웹 이야기 > 웹관련 팁' 카테고리의 다른 글

파이어폭스 inline-block 버그 (0)	2009/03/13
내 블로그글을 인쇄할때 저작권정보를 넣기 (8)	2008/10/06
IETester새버전이 나왔네요. (0)	2008/09/22
티스토리 스킨편집시 직접올리기가 안되는 경우 해결하는 방법 (6)	2008/07/08
IE를 버전별로 볼 수 있는 IEtester (14)	2008/06/05
IE에서 객체에 alpha를 주기 위해 주의할 점.. (0)	2008/05/28