웹관련/크로스브라우징15 [IE] 인터넷익스플로러에서 background-attachment:fixed 사용시 버벅거림 해결방안 크롬과 파이어폭스 계열에선 background-attachment:fixed CSS부분이 문제없이 정상적으로 잘 작동을 합니다. 그러나 IE(인터넷익스플로러)와 edge(엣지) 계열에선 백그라운드를 고정을 하면, 버벅거림이 발생이 됩니다... 자바스크립트로 하는방법도 많지만 CSS로 해당 부분을 해결할수가 있는 부분이 있어서 기록을 해둡니다. /*Edge - works to 41.16299.402.0*/ @supports (-ms-ime-align:auto) { html{ overflow: hidden; height: 100%; } body{ overflow: auto; height: 100%; position: relative; } } /*Ie 10/11*/ @media screen and (-ms-h.. 2019. 8. 2. [CSS] 인터넷익스플로러[IE]의 css transition 떨림문제 해결방안 최근들어 배경화면이 서서히 커지는 효과를 많이 사용합니다. 근데 크롬과 파이어폭스등은 transition 효과를 사용하여 scale로 점점 커지게 하면 부드럽게 아주 잘 작동을 합니다. 그러나!!! 항상 문제는 IE 가 문제네요... scale 효과로 점점 커지게 할때, 이미지가 떨리는 현상이 발생이 됩니다. 한참을 인터넷을 검색하다가, 외국사이트에서 IE 오류라고 하네요... 망할... IE 언제쯤 사라질래..... 다행히 해결방안을 제시합니다. 방법은 transform:perspective(500px) rotate(.001deg); 추가 하라는것이네요. CSS부분을 그래서 아래와 같이 처리를했더니 떨림을 잡아줍니다.. 다행.... .mainFullPage .section .setionbg {width.. 2019. 2. 8. [인터넷익스플로러] 팝업창에 데이터 넘길때 부모창에 [object] 뜰때 부모창에서 팝업창으로 데이터를 넘길때 크롬과 다른 브라우져는 정상인데.... 익스플로러에서만... 부모창에 [object] 라고 뜨는경우가 있습니다... 아래의 코드는 일반적으로 팝업창을 띄울때 사용하는 코드입니다. 새창 이렇게 하면 크롬이나 사파리등 다른 브라우져는 문제가 없습니다... 그런데 망할.... 익스에선 부모창에 [object] 가 뜨네요.....망할 익스플로러 때문에 한번더 감싸서 void 선언을 해주어야 합니다. 새창 이렇게 호출을 하면 익스플로러에서 [object] 라는 글씨가 뜨면서 나오지 않습니다. 어떻게 보면 기초적인 부분인데... 모르면 귀한 시간을 낭비할수 있습니다.. 2018. 2. 23. [CSS] Background-size IE 핵 .backgroundimg { display: block; width: 42px; height: 48px; margin-bottom: 1.8em; background-image: url(arrow-big-right.png); background-repeat: no-repeat; background-size: 42px 48px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod.. 2016. 9. 23. [IE7] display:table 적용 방법 display-table.htc_2011-11-25.zipdisplay:table, display:table-cell (IE7) htc파일을 불러와서 구현이 가능합니다. 123body{behavior: url(/_/js/display-table.min.htc);} #nav {-dt-display:table} #nav li {-dt-display:table-cell}이 경우 body에서 htc 파일을 불러온 뒤, display:table을 적용한 모든 코드에 -dt-display를 추가해야하는 번거로움이 있습니다. 또한, htc파일의 로딩 시간 이슈로 구현은 가능하나 추천하지는 않습니다. 적용예시는 아래 URL을 참고하시면 됩니다.http://tanalin.com/en/projects/display-tab.. 2016. 9. 23. [iphone] div에서 overflow-scrolling 시 딱딱 끊기는 현상 해결방안 iphone 에서 터치로 div를 롤링하면 어플리케이션처럼 부드럽게 애니메이션 효과가 들어가는 것이 아니라, 딱딱 끊기는 현상을 볼 수 있다. 이런 문제를 해결하기 위해 해당 div에 아래와 같은 css를 추가한다.-webkit-overflow-scrolling: touch;-webkit-overflow-scrolling 는 모바일 GPU를 사용하는 작업이라, 상당히 배터리를 잡아먹는다. 꼭 필요한 곳에서만 선언해서 사용하자.[출처] [iphone] div에서 overflow-scrolling 시 딱딱 끊기는 현상 해결방안|작성자 mrb18bae 2016. 9. 23. [CSS] IE8 이미지 사이 여백 없애기 테이블로 여러장의 사진을 모아서 하나의 페이지를 만들고자 하는 경우 IE8 이전의 버전의 경우는 그런일이 없으나 IE8 그리고 IE9 버전의 경우에는 여백이 발생하게 된다. 이럴때 IMG 태그에 CSS로 그 여백을 없애줄수 있다. 이거때문에 오늘 5시간 개고생했다 ㅠㅠ 망할.... 저 간단한것을.. style="vertical-align:top;" [출처] IE8 이미지 사이 여백 없애기|작성자 mrb18bae 2016. 9. 23. [CSS] a(anchor)태그에 position:absolute 지정되었을경우 IE에서 클릭되지 않는 문제해결방법 a 태그에 클래스를 준뒤 position을 주고 띄우면 클릭이 안되는 에러가 발생된다. 그럴경우 CSS에 아래의 코드를 추가해주면 해결이 된다.background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") 0 0 repeat;[출처] [CSS] a(anchor)태그에 position:absolute 지정되었을경우 IE에서 클릭되지 않는 문제 해결하기|작성자 mrb18bae 2016. 9. 23. [CSS] ie8 이하 border-radius - htc 사용법 Ie8 이하에서는 border-radius 와 box-shadow 등 CSS가 작동을 안합니다.하여 IE8 이하에서도 해당 CSS가 보여지게끔 파일 하나만 FTP로 올린뒤CSS에 한줄만 추가함으로써 IE8 이하에서도 보여지게끔 할수 있습니다. 1. 첨부파일 또는 아래사이트에서 압축되어있는 파일을 다운로드후 압축을 푼뒤 파일중에서 PIE.htc 파일을 FTP로 업로드 합니다. -PIE파일을 받을수 있는 사이트-http://css3pie.com/download/ 2. 아래의 코드처럼 behavior: url( "PIE.htc" ); 코드를 써주기만 하면 ie7과 8까지 적용되지 않던 border-radius 와 box-shadow 등이 보여집니다. 이제 IE8에서도 원을 볼 수 있습니다. [출처] [ie8 .. 2016. 9. 23. 이전 1 2 다음
