'크로스브라우징'에 해당되는 글 17건

  1. 2016.06.08 윈도우10 엣지브라우저 전화번호 형태 링크없앰
  2. 2012.09.06 ie6 이상한아이 발견~!
  3. 2011.12.01 ie6 주소창고정프레임셋 백그라운드 버그
  4. 2011.11.23 ie6/ie7 border-collapse 문제
  5. 2011.06.13 익스플로러 filter 적용 문제
  6. 2011.05.31 word-break 이런 문제가....
  7. 2011.04.07 ie HTML5 에서 border-radius 사용제한
  8. 2010.12.14 CSS Hack 1
  9. 2010.08.04 ie7 li 주위로 3px정도 공간이 생기는 버그
  10. 2010.07.10 min-height

윈도우10 엣지브라우저 전화번호 형태 링크없앰

크로스브라우징 2016. 6. 8. 10:46

이번 프로젝트에서 윈10 엣지에서 발생한 전화번호 형태의 링크속성 없애는 법.

메타태그는 삽입 했는데 적용되는지는 확인하지 못함.

 

 

 

<meta name="format-detection" content="telephone=no"/>

[출처] 윈도우 엣지에서 전화번호 형태에 링크걸리는데 없애는방법아시나요?  (하드코딩하는사람들) |작성자 아이고오

 

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

ie6 이상한아이 발견~!  (0) 2012.09.06
ie6 주소창고정프레임셋 백그라운드 버그  (0) 2011.12.01
ie6/ie7 border-collapse 문제  (0) 2011.11.23
익스플로러 filter 적용 문제  (0) 2011.06.13
word-break 이런 문제가....  (0) 2011.05.31
:

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
:

ie6 주소창고정프레임셋 백그라운드 버그

크로스브라우징 2011. 12. 1. 18:58
바디에 bg로 깔아놓은 이미지 무한반복버그. 속성을 나눠서 써주거나 div로 감싸서 여기 이미지 깔아주고 해결

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

윈도우10 엣지브라우저 전화번호 형태 링크없앰  (0) 2016.06.08
ie6 이상한아이 발견~!  (0) 2012.09.06
ie6/ie7 border-collapse 문제  (0) 2011.11.23
익스플로러 filter 적용 문제  (0) 2011.06.13
word-break 이런 문제가....  (0) 2011.05.31
:

ie6/ie7 border-collapse 문제

크로스브라우징 2011. 11. 23. 18:03
버그가 있다는건 알았는데 정확히 어떤건진 경험해보지 못했었다. Show hide 기능이 들어갈때 라인겹침 현상 발생....이 버그가 정확히 어떤상황에만 발생하는진 아직 파악못했지만 테이블에 cell을 직접박는 이유를 이제 실감했다.

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

ie6 이상한아이 발견~!  (0) 2012.09.06
ie6 주소창고정프레임셋 백그라운드 버그  (0) 2011.12.01
익스플로러 filter 적용 문제  (0) 2011.06.13
word-break 이런 문제가....  (0) 2011.05.31
ie HTML5 에서 border-radius 사용제한  (0) 2011.04.07
:

익스플로러 filter 적용 문제

크로스브라우징 2011. 6. 13. 13:45

css3 적용 문제로 테스트 중 필터끼리 충돌(?) 하는 문제가 발생했다. 


ie8을 쓰는 중인데...

버튼 안에

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcf1d9', endColorstr='#f1c660');
filter: progid:DXImageTransform.Microsoft.Shadow(color=#7f6831,direction=135, strength=2);


위처럼 두가지가 같이 들어있을경우 아래것만 먹고 위에것은 적용이 안됐다.


클래스 그림자를 만들어 따로 적용해보았다.

button {filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcf1d9', endColorstr='#f1c660');
}

.shadow {filter: progid:DXImageTransform.Microsoft.Shadow(color=#7f6831,direction=135, strength=2);
}


버튼 태그 안에 클래스 .shadow를 넣었는데 그림자가 먹질 않는다.
뭐냐....필터 하나 이상 못쓰는건가................ㅡ,.ㅡ?

반대로 해도 마찬가지. 태그우선으로 클래스를 아래 적어놔도 태그에 넣어둔 filter CSS를 먼저 먹는다.

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

ie6 주소창고정프레임셋 백그라운드 버그  (0) 2011.12.01
ie6/ie7 border-collapse 문제  (0) 2011.11.23
word-break 이런 문제가....  (0) 2011.05.31
ie HTML5 에서 border-radius 사용제한  (0) 2011.04.07
CSS Hack 1  (0) 2010.12.14
:

word-break 이런 문제가....

크로스브라우징 2011. 5. 31. 14:35
한글 단어자름 때문에 넣어두는 word-break 때문에 크롬이나 사파리에서 영문이 단어별로 잘리는게 아니라 글자 하나하나 잘리는 현상이 나타났다.

word-break:normal; 로 바꿔주면 해결. 이런 문제가 있었나.ㅡㅡ;ㅋ

css 를 같은 템플릿도 아니고 다른데 다 돌려쓰니 문제가 참 많네....



****예전부터 게속 쓰던 태그라 의심없이 썼었나보다. word-wrap 은 모든 브라우저 적용인데 왜 이걸 안쓰고....일단 이걸로 버전별 테스트 해봐야겠다.
/************************************************************************************/



이건 테이블에 데이터가 들어오는 경우...(게시판 같은거) 등등인듯

출처: http://www.mimul.com/pebble/default/2008/10/19/1224416040000.html

1. 브라우저별로 지원되는 word-break 속성
속성 Internet Explorer 5이상 Safari 3이상／Chrome
normal ○ ○
keep-all ○ ×
break-all ○ ○

2. IE6, 7 적용 방안
 - class 나 style="word-break:break-all;" 식의 인라인 스타일

3. Firefox에서 임시 방편으로 적용 방안
 - overflow:hidden으로 사용하면 박스 레이아웃을 유지할 수 있음
 - 스크롤바가 하위에 생겨서 보기 싫음

4. jQuery를 활용한 Cross Browser애서 사용
 - FireFox나 Opera에서는 word-break:break-all 스타일이 비표준이라서 허용되지 않음
 - 다른 방법이 필요
 - Usage: $('[search]').breakWords();
 - 소스
  (function($) {


    $.fn.breakWords = function() {


      this.each(function() {


        if(this.nodeType !== 1) { return; }


  


        if(this.currentStyle 


          && typeof this.currentStyle.wordBreak === 'string') {


          this.runtimeStyle.wordBreak = 'break-all';


        }


        else if(document.createTreeWalker) {


          var trim = function(str) {


            str = str.replace(/^\s\s*/, '');


            var ws = /\s/,


            i = str.length;


            while (ws.test(str.charAt(--i)));


            return str.slice(0, i + 1);


          };


  


          //For Opera, Safari, and Firefox


          var dWalker = document.createTreeWalker(this, 


          NodeFilter.SHOW_TEXT, null, false);


          var node,s,c = String.fromCharCode('8203');


          while (dWalker.nextNode()) {


            node = dWalker.currentNode;


            s = trim( node.nodeValue ).split('').join(c);


            node.nodeValue = s;


          }


        }


      });


  


      return this;


    };


  })(jQuery);

[참고 사이트]
  • http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  • http://snippets.dzone.com/posts/show/6271
  • http://www.hedgerwow.com/360/dhtml/css-word-break.html
  • http://blog.stevenlevithan.com/archives/faster-trim-javascript

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

ie6/ie7 border-collapse 문제  (0) 2011.11.23
익스플로러 filter 적용 문제  (0) 2011.06.13
ie HTML5 에서 border-radius 사용제한  (0) 2011.04.07
CSS Hack 1  (0) 2010.12.14
ie7 li 주위로 3px정도 공간이 생기는 버그  (0) 2010.08.04
:

ie HTML5 에서 border-radius 사용제한

크로스브라우징 2011. 4. 7. 10:58


이거....문제점이 많구나...-_-;ㅋ

ie에서 htc만 넣어주면 당연히 나올줄 알았는데.....orz....

분명 테스트에선 제대로 나오던게 html5 코딩 안에만 들어가면 ie 에서 백그라운드가 사라져 버려 뭘 잘못한줄 알았다.  

ie를 위해 html5 태그를 블록시켜준 display:block; 이 문제 였다. 이걸빼면 htc는 먹는데 이걸 안넣고는 레이아웃이 만들어질 수가 없으니 결국 라운드박스는 사용에 제한이 생겨버렸다. 게다가 코너를 선택해서 굴리는 css도 먹질 않았다.


ie 에서 htc 사용시

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

border-radius : O
border-bottom-left-radius:  X  (내가 받은 htc가 업데이트가 덜 된게 아닐까....? 이건 좀 더 찾아볼 필요가 있겠다.)




<!doctype html>

radius : X   (백그라운드가 나오지 않는다. display:block;을 빼면 레이아웃이 틀어짐)




결국 지금 만들고 있는 샘플은 이미지로 대체해야될듯.....후....
HTML5로 코딩하는데 CSS3를 못쓰고 이미지로 대체해야된다니 이거 참.......ㅡ,.ㅡㅋ


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

익스플로러 filter 적용 문제  (0) 2011.06.13
word-break 이런 문제가....  (0) 2011.05.31
CSS Hack 1  (0) 2010.12.14
ie7 li 주위로 3px정도 공간이 생기는 버그  (0) 2010.08.04
min-height  (0) 2010.07.10
:

CSS Hack 1

크로스브라우징 2010. 12. 14. 13:19

CSS Hack
IE6 이하
* html { … }
IE7 이하 (두가지 동시에 사용)
*:first-child+html { … } * html { … }
IE7에서만
*:first-child+html { … }
IE6 제외한 최신 브라우져 (ex. IE7, Mozila, Opera)
html>body { … }
IE7 제외한 최신 브라우져
html>/**/>body { … }
Comment Hack
<!–StartFragment–><!–[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]–>

<!–[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]–>

<!–[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]–>

<!–[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]–>

<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]–>

<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]–>

<!–[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]–>

<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]–>


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

word-break 이런 문제가....  (0) 2011.05.31
ie HTML5 에서 border-radius 사용제한  (0) 2011.04.07
ie7 li 주위로 3px정도 공간이 생기는 버그  (0) 2010.08.04
min-height  (0) 2010.07.10
ie6 position 버그  (0) 2010.07.09
:

ie7 li 주위로 3px정도 공간이 생기는 버그

크로스브라우징 2010. 8. 4. 13:30

1. li안에서 3px 정도 공간이 생기는 버그

li는  height:13px 값을 가지고 있다. 그런데 이미지나 텍스트 위에 ie7에서만 3px정도 되는 공간이 생기면서 주저앉았다.
기본을 line-height:1.5em를 가지고 있었기에 혹시나 해서 line-height값을 13px 주어보았다. 이게 문제였음....

<ul>
<li>이미지 혹은 텍스트</li>
<li>이미지 혹은 텍스트</li>
</ul>

2. li와 li 사이에 3px 정도 공간이 생기는 버그

li 안에 바로 ul 이나 dl 이 나올경우 font-size 때문에 공간버그가 생길수 있다.

line-height 으로 해결이 되지 않을 경우 font-size:0 으로 해결 가능하다.

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

ie HTML5 에서 border-radius 사용제한  (0) 2011.04.07
CSS Hack 1  (0) 2010.12.14
min-height  (0) 2010.07.10
ie6 position 버그  (0) 2010.07.09
ie 랜더링 문제  (0) 2010.05.14
:

min-height

크로스브라우징 2010. 7. 10. 17:50

1. 핵을 사용한다. 

.minheight_ex {   min-height:550px; } /*표준용*/

*html .minheight_ex {height:550px;} /*익스용*/

 

2. 핵을 사용하지 않는다.

.minheight_ex {
  min-height:550px;
  height:auto !important;
  height:550px;
}

[출처] min-height 사용하기 |작성자 도투플라워

이번 프로젝트엔 유난히 둥근이미지박스가 많았다.
가변성과 이미지사용을 따지자면 코너 4개를 이미지로 돌리는게 좋긴 하지만 불필요한 태그가 너무 많이 들어간다. 또 ie6에서 position 버그도 있기 때문에 그다지 사용하지 않았었는데 이번엔 둥근모서리박스가 너무 많이 나와서 스타일을 통일해버렸다.
그때 정말 유용하게 썼던게 바로 핵을 사용하지 않고 쓸 수 있는 height값 이다. position버그로 인해 가로세로 값을 지정해주어야 했기 때문이다.

................./* table min-height 적용 불가 */

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

CSS Hack 1  (0) 2010.12.14
ie7 li 주위로 3px정도 공간이 생기는 버그  (0) 2010.08.04
ie6 position 버그  (0) 2010.07.09
ie 랜더링 문제  (0) 2010.05.14
브라우저별 테이블 height 값으로 본 픽셀 테스트  (0) 2010.04.21
:
◀ PREV : [1] : [2] : NEXT ▶

티스토리툴바