ie6 이상한아이 발견~!

크로스브라우징 2012. 9. 6. 11:02

#wrap {/*position:relative;*/ background:url(../images/common/bg.gif) repeat-x;}

ie 테스터로 본것이기때문에 브라우저도 동일하게 나오는지는 확인을 못햇다.

이번에 코딩하면서 이상했던것....

가장 상위 div에 background 를 반복시키면 position:relative; 가 들어간 div가 위에 있을 경우  margin-top이 먹질 않는다....

익스는 ie6,7을 대상으로 강제업데이트를 했으나....아직도 ie6을 쓰는곳이 있다 -_-; ㅋ

왠만하면 말 안나오게 다 맞추는 편인데 예전 프레임셋을 쓰면서 body 에 background를 넣었을경우 무한반복되는 현상으로 인해 body안에 이미지를 안넣고 상위 div 에 넣었는데 이미지 반복시키니까 margin-top 부분이 이상해진다.

문제는 바로 위에 있던 div 에 position:relative; 가 들어가있다는 건데..뺄수가 없다. 하나하나 지워가다보니....결국 bg 반복이 문젠데.....가장 상위 div에 position:relative; 를 넣고 해결했다.

ie6은 파도파도 끝이 없다. 왠만한 버그는 다 섭렵했다고 생각했거늘..-_-;ㅋ...

 

 

'크로스브라우징' 카테고리의 다른 글

윈도우10 엣지브라우저 전화번호 형태 링크없앰  (0) 2016.06.08
ie6 주소창고정프레임셋 백그라운드 버그  (0) 2011.12.01
ie6/ie7 border-collapse 문제  (0) 2011.11.23
익스플로러 filter 적용 문제  (0) 2011.06.13
word-break 이런 문제가....  (0) 2011.05.31
:

신현석님 Jquery AIP 정리

jQuery 2012. 8. 29. 15:43

http://hyeonseok.com/soojung/javascript/2011/06/04/658.html

'jQuery' 카테고리의 다른 글

이미지 배너  (0) 2014.05.13
div 안에 있는 엘리먼트 합 구하기  (0) 2013.02.03
마우스오버 아웃  (0) 2012.07.10
웹접근성에 맞는 탭메뉴  (0) 2012.07.02
jQuery IE 버전에 Placeholder 적용하기  (0) 2012.06.26
:

One-Time Expression 한번만 실행시키자.

CSS 2012. 7. 27. 13:14

 

Expression.
인터넷 익스플로러(IE6,7)에서만 사용할 수 있는 CSS 표현입니다.
말도 많고 탈도 많은 녀석이죠.

자바스크립트가 최소단위인 천분의 일초로 작동을 한다면
이녀석은 수천분의 일초 아니 거의 만분의 일초까지도 되는 것 처럼 작동을 합니다.
(직접 세어보지는 않았습니다. 그냥 느낌이에요 느낌상-_-;)
예를 들어,
IE6에서는 표현이 불가능한 postion: fixed 속성을 expression으로 표현하면
스크롤을 겁나 빨리 내리고 올려도 울렁거림 없이 거의 완벽한 동작을 보여줍니다.

어떠한 동작(이벤트)이든 일어나는대로
이 수천분의 일초 간격으로 계속 대기하고 읽어들이고 값을 던져주고 있다는 겁니다.
그래서 브라우저에 부담을 주고 심지어는 브라우저를 멈추거나 셧다운-_- 시켜버린다는
무시무시한 소문을 안고 다니는 녀석이죠.

그래도 IE6에서는 지원되지 않는 수많은 CSS 속성을
expression을 사용하여 자바스크립트 언어로 표현이 가능한
엄청난 강점을 갖고 있어서 외면하려고 해도 가끔은 생각이납니다.-_-;

대략 2년 전인가요.
야후에서 근무하는 어떤 멋진(wow) 분이- (지금은 구글 olleh!)
expression의 살인적인 아니 살브라우저적인 호출을 상당히 줄여줄 수 있는 방법을 제시했습니다.


저 페이지를 처음 보았을 당시 전 이제 막 웹표준의 웹을 시작하고 있었던 터라
"음. 이런게 있군- expression 무서운 녀석." 이라고 그냥 넘기고 말았는데요.

오늘 max-height 때문에 expression을 써야하나 고민을 잠깐 하다가
max-height 같은 경우는 position: fixed 처럼 계속해서 읽어들일 필요가 없이
페이지 열릴때 한번만 잡아주면 되거든요.
정말로 작동을 하는지, 진짜 차이가 있는건지 궁금해서 테스트 페이지를 한번 만들어 보았습니다.


예제 파일 : http://mkyoon.tomeii.com/expression.html (IE6, 7에서 보셔야 합니다.)

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One-Time Expressions</title>
<style type="text/css">
     .onetime {
          width: 200px;
          padding: 10px;
          border: 2px solid #666;
          overflow: hidden;
          /* 생각없이 쓴 expression */
          height: expression( setCntr(), this.scrollHeight > 99 ? "100px" : "auto" );
          /* 멋진 아저씨가 추천한 방법 */
          /*height: expression(
               setCntr(),
               new Function('el', 'el.style.height = el.scrollHeight > 99 ? "100px" : "auto";')(this)
          );*/
     }
</style>
<script type="text/javascript">
//<![CDATA[
     var gnExpr = 0;
     var gCntrDisplay;
     var gbOn = true;

     function setCntr() {
          gnExpr++;

          if ( gbOn ) {
               displayCntr();
          }

          return true;
     }

     function displayCntr() {
          if ( ! gCntrDisplay ) {
               gCntrDisplay = document.getElementById("cntrdisp");
          }

          if ( gCntrDisplay ) {
               gCntrDisplay.value = gnExpr;
          }
     }

     function setDisplay(bOn) {
          gbOn = bOn;
     }

//]]>
</script>
</head>
<body>
     <input type="text" size="10" id="cntrdisp" disabled="disabled"/>
     <div class="onetime">
          (마우스를 움직여보세요.)
          우리는 달려간다 이상한 나라로 니나가 잡혀있는 마왕의 소굴로 
          어른들은 모르는 사차원세계 날쌔고 용감한 폴이 여깄다
          마술차 마술봉 딱부리 삐삐 찌찌 힘을 모으자 대마왕 손아귀에 니나를 구해내자 
          띠이빠빠 띠이빠빠 달려간다 삐삐
     </div>
     <p>출처 : http://stevesouders.com/hpws/onetime-expressions.php</p>
</body>
</html>

'생각없이 쓴 expression' 부분과
주석처리된 '멋진 아저씨가 추천한 방법' 을
주석부분을 바꿔서 열어보시면 차이를 바로 알 수 있습니다.
(정말로 딱 1개만 찍히네요. 오우 신기.)


결론 : expression 한번만 실행시키기.
CSSproperty: expression(
          new Function('el', 'el.style.CSSproperty = 어쩌구 저쩌구 계산식')(this)
     );



하지만 이방법도 완전한 해결책은 아니라고 하네요~
expression 자체가 위험하긴 하나봅니다. IE8에서도 내다버린 녀석이니까요.

2009/09/04 00:06 2009/09/04 00:06


출처 : http://mkyoon.com/130

'CSS' 카테고리의 다른 글

css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
:
◀ PREV : [1] : [···] : [5] : [6] : [7] : [8] : [9] : [10] : [11] : [···] : [51] : NEXT ▶

티스토리툴바