IE7 인터넷익스플로러7 베타버전을 설치 사용해 보았습니다. (정품 XP 인증코드를 가지고 있으셔야 하며, SP2 가 설치되어 있어야 합니다) 역시나 예상했던데로 전혀 특별한 부분없이 3류의 브라우저로 발돋움 하는 군요. IE6이 나왔을때에는 귀여운 아이콘들과 5.5 에서의 멋진업글이었습니다. ‘그당시’에는 말이죠. 하지만 지금 바라보는 IE7은 TAB 이라는 기능이 들어갔다는 것 말고는 특별히 달라진 점을 찾을수 없습니다. 툴바들, 아이콘들의 위지가 바뀌었을뿐, 전혀 IE6의 차기버전 이라고 보기에는 믿기지 않을 정도로 평범 이하 입니다. 버그들 또한 마찬가지네요.. ㅡㅡ;;

  • 아무튼 인터페이스야 뭐라해도 일단 제 관심사인 CSS 의 변화는 어떻게 이루어 졌나 한번 살펴 보았습니다.

    margin Error?
    일단 MARGIN 의 에러들은 모두 잡혔습니다. xhtml 1.0 transition 로 실행 하였을 때에, IE 에서 고질적으로 보이뎐 3px 에러는 표준 그대로 실행이 됩니다. 3px margin 에러는, float 값을 주었을때에 주어진 반대쪽에 3px 마진이 저절로 생기는 에러로 수작업으로 margin-left: -3px 을 주었어야 했습니다만 잡혔네요.
    그뿐만이 아닌 float한 방향으로 margin 을 주면 2배로 늘어나던 에러 또한 잡혔습니다.
    전혀 문제가 없네요
    네 다른 테스팅을 해보니 놀랄만큼 그대로군요 ㅡㅡ;;

    나머지들
    물론 아직까지 어미div 가 child div 들을 감싸는 부분은 그대로 입니다. 다른 메이져 브라우저들은 float 값이 지정되었을때에 어미 div는 나머지에 상관없이 그 height 값을 그대로 유지했지만 ie 는 아직도 child div 의 높이값에 따라 늘어나거나 줄어들게 되어있네요.

    또한 아직 :after, :before나 :hover 는 지원하지 않으며, !important 또한 예전 그대로의 버그를 가지고 있습니다.

    총 정리가 되어 비교된 스샷입니다.
    왼쪽은 IE7 이며 오른쪽은 FIREFOX 1.04 버전입니다. 핵은 일체 사용되지 않았습니다. 아, 빨간 부분이 바로 어미 div 입니다. 역시나 불여우에서는 속해있는 div 를 감싸지 않습니다. 그게 맞는 부분이구요. :)
    IE7 의 CSS 테스팅

    <!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> test </title>
<style type="text/css">
<!--
	#main {
		height: 10px;
		width: 300px;
		padding: 0;
		margin: 0;
		background: #ff0000;
		}
	#sidebar {
		margin: 0;
		height: 50px;
		padding: 0;
		width: 100px;
		float:left;
		background: #ffff00 !important;
		background: green;
		}
	#bottom {
		float:left;
		width: 140px;
		border: 10px solid #000;
		height: 100px;
		margin: 0 0 0 20px;
		background: blue;
		padding: 10px;
		}

	.clearItem:after{
		content: ".";
		clear:both;
		height: 0;
		display:block;
		}
	.clearItem:hover {
		background: red;
		}
	#footer {
		clear:both;
		height: 20px;
		width: 100%;
		background: pink;
}
-->
</style>
</head>

<body>
<div id="main">
	<div id="sidebar">
	</div>
	<div id="bottom"><p class="clearItem">hi</p>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>

    oTL.. 두번째 테스트중 보니,, 놀랄만 합니다. ceprix님께서 현석님네에 올려주신 션인먼의 ie7 에 대한 글모음을 보니 거의 개선된 버그가 없군요….. 피카부 버그와 길로틴 버그만이 개선되었네요. ㅡㅜ

  • 그럼 IE7 이 나오면서 어떤 사이트들이 깨지면서 영향을 받을까? 해서 여러곳을 한번 테스트 해 보았습니다.
    여러 포털 사이트들과 유명한 사이트들을 돌아 다녔습니다. 일단 익스플로러 인지라 깨지는 부분이 그리 없었습니다. 있는곳은 약간깨질뿐 메이저는 볼수 없었네요 ^^

    1. 제일 처음으로 발견된곳이 DAUM 다음 입니다. 뉴스 부분이 겹쳐서 깨져 나오더군요.
      다음 사이트가 IE7 에서 깨지는 현상
    2. 그리고 그 다음이 싸이월드의 쪽지 부분입니다. IE 가 표준을 받기는 했나 보다 라는 생각이 드는군요 ^^;
      싸이월드의 IE7에서 깨지는 현상
    3. 야후 메일은 아예 로그인을 막고 있네요. 낮은 버전을 선택하기를 하면 로그인 되는군요.
    4. 국민은행 로그인이 되지 않는다고 하네요 혹시나 확인 부탁드립니다 ^^

    이 말고는 지금까지 특별히 찾지 못했습니다. IE 위주로 개발된 사이트라 특별히 깨지겠냐만은 혹시나 있다면 이곳으로 트랙백 쏘시거나 코멘트 남겨주시면 계속 업데이트 하겠습니다.

전체적으로 아쉬운 부분들이 많은 브라우저 입니다. 일단 이유는 가장 최근에 발표되는 브라우저 치고는 너무 구식이며, 놀랄만큼 단순하고 전혀 매력적이지 않은 인터페이스, 오히려 어디서 군데군데 단순히 배껴서 제작된거 같은 화면이라는 생각이 지워지지 않네요. 앞으로 몇년간 IE7이 사용될지는 모르지만, 몇달안에 불여우의 1.5 발표(via Ceprix)와 함께 구식 브라우저로 자리매김 할수 있을듯 하네요. 베타버전이니 정식발표때에는 좀 개선되겠죠 라고 하시는분이 있으실지 모르지만, ‘BETA’ 버전은 특별히 안의 코어부분이 바뀌는 것이 아니기 때문에, 자질구래한 버그들이 잡힐뿐 큰 변화는 없을겁니다. 그래서 더 씁쓸한걸지도. . ^^;;;;

추가: css design korea 에서 지윤님께서 ie7 의 글을 또 올려주셨습니다.

추가2: 신현석님 블로그에서 접했습니다. 따끈따근한 소식을 올려주셨는데 이제서야 제가 올립니다. IE 블로그에 올라왔던 내용입니다. 앞으로 업데이트 될 IE7 의 개선 리스트네요. 마소가 오랜만에 좋은일 하는군요.

잡을 버그들

  • Peekaboo bug
  • Guillotine bug
  • Duplicate Character bug
  • Border Chaos
  • No Scroll bug
  • 3 Pixel Text Jog
  • Magic Creeping Text bug
  • Bottom Margin bug on Hover
  • Losing the ability to highlight text under the top border
  • IE/Win Line-height bug
  • Double Float Margin Bug
  • Quirky Percentages in IE
  • Duplicate indent
  • Moving viewport scrollbar outside HTML borders
  • 1 px border style
  • Disappearing List-background
  • Fix width:auto

추가 지원

  • HTML 4.01 ABBR tag
  • Improved (though not yet perfect) <object> fallback
  • CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
  • CSS 2.1 Fixed positioning
  • Alpha channel in PNG images
  • Fix :hover on all elements
  • Background-attachment: fixed on all elements not just body
tags: , , ,