IE9 스크롤있는 박스의 높이가 늘어나는 현상

dev | 2013-03-14

IE9에서 overflow: auto로 스크롤이 생긴 박스안의 링크를 클릭하면 박스 아래에 여백이 생기는 버그가 있다는 질문을 하신 분이 있어서 분석을 해봤다.

<!DOCTYPE html>
<html lang="en">
<head>
<title>IE9 scrolled box's height expending</title>
</head>
<body>
<div style="width: 200px; overflow: auto;">
	<div style="width:500px;">
		<a href="#">test</a>
	</div>
</div>
FAIL if this text moves down after click link.
</body>
</html>

해결책은 스크롤이 생긴 박스에 margin-top: auto와 같이 아무 방향으로 margin값을 auto로 지정하면 된다.

<div style="width: 200px; overflow: auto; margin-top: auto">

IE9 스크롤있는 박스의 높이가 늘어나는 현상

Comments

Post a comment

Recent Comments

Categories

Archives