로그인

이메일
비밀번호
왼쪽에 걸리적 거리는 거 숨기기

'파이어폭스'에 해당되는 글 8건

  1. 파이어폭스에서 text-overflow:ellipsis 쓰기 (2)

    2008/10/21

  2. FireFox 에서의 innerHTML 버그 (6)

    2008/09/02

  3. 파폭에도 querySelector 함수군이 생김 (2)

    2008/07/31

  4. 아 제발 옥션... (3)

    2008/06/17

  5. 파이어폭스에서의 uncaught exception: Location.toString 에러 해결 (1)

    2007/08/22

  6. 메모리귀신 파이어폭스

    2007/04/03

  7. 파이어폭스에서 Selectbox 옵션 항목 안 넘치게 하기 (1)

    2007/04/03

  8. Eolas 패치를 하지 않아도 되는 파이어폭스 (4)

    2007/01/02

파이어폭스에서 text-overflow:ellipsis 쓰기

컴퓨터/웹 2008/10/21 13:26
예전에 text-overflow:ellipsis 썼을 때에는 IE 에서만 지원하는 스타일이었는데,

어느샌가 Opera, Safari, Chrome 등등에서도 모두 지원하는 CSS 스타일이 되었군요~
CSS3 스펙에도 포함되고 말이죠~ 세상 참 좋아졌습니다-_-; ㅋㅋ

MS 만의 독단적인 text-overflow, filter, ime-mode, expression 같은 CSS 스펙들이 예전에는 참 마냥 미워보이기만 했는데 요즘에는 결과적으로 꽤 괜찮은 짓 같았다는 생각이 드네요~

뭐 아무튼, 이런 좋은 text-overflow 라는 CSS 스타일을
아쉽게도 FireFox 에서는 여전히 지원하질 않습니다.

IE 다음으로 브라우저 점유율이 높은 FireFox 이기 때문에 이를 무시하고 개발하기 좀 망설여지게 되는데요, 방법이 없을까 하고 구글링을 하다가 보석같은 코드를 만났습니다~


위의 코드인데요, 매우 훌륭하지만 몇가지 문제가 있습니다.

  1. 해당 부분 글자가 선택이 안됨
  2. 해당 부분에 태그를 사용할 수 없음
 
이 중 첫번째 문제를 꼼수를 통해 해결 해보았습니다.

구현방법은 설명하기 귀찬; 소스코드를 통해 각자 알아서 파악하세요;

IE6, IE7, FF3, Opera9, Safari3, Chrome 에서 테스트 해 보았습니다.
혹시 다른 브라우저 버젼 쓰시는 분 알려주시면 ㄳ
IE8 beta2 에서는 안되더군요.
이건 스크립트 문제라기 보단 그냥 IE8 beta2 의 CSS 문제인 듯?

두번째 문제는 제가 XUL 을 할 줄 몰라서 방법이 있을런지 모르겠네요.
몇가지를 시도해 보았는데 잘 안됩니다;

아시는 분 알려주세요~
영양가 있는 포스팅인가요
(총 1분이 투표해서 5.0점) 5.0점
2008/10/21 13:26 2008/10/21 13:26
, , ,
트랙백 0 : 댓글 2 : RSS

FireFox 에서의 innerHTML 버그

컴퓨터/웹 2008/09/02 16:46

이미 아시는 분들도 있겠지만 Internet Explorer 의 경우는 <TABLE>, <THEAD>, <TBODY>, <TR> 엘리먼트의 innerHTML 이 읽기전용이라서 innerHTML 을 셋팅 할 수 없는 문제가 있습니다.

그리고 <SELECT> 도 innerHTML 가 읽기전용은 아니지만 막상 사용하면 동작이 이상해지는 문제가 있죠.

IE 에서 이런 문제가 있다는 건 많이 알려진 내용인데요, 오늘 팀원 한 분이 제가 짠 코드가 이상하게 동작한다는 제보를 해주셔서 발견한 문제를 공유드립니다.

이 문제는 IE 가 아닌 FireFox 에서만 발생하는 문제인데요, parentNode 가 존재하지 않는 엘리먼트에다가 innerHTML 로 셋팅하려고 할 때 문제가 발생합니다

이를 테면

(Language : javascript)
<table><tr id=”HELLO”></tr></table>
…
var hello = document.getElementById(“HELLO”);
hello.innerHTML = ‘<td>hello</td><td>world</td>’;


위와 같은 코드에서는 hello 의 parentNode 가 존재하기 때문에 문제가 안 생기지만

(Language : javascript)
var hello = document.createElement(‘tr’);
hello.innerHTML = ‘<td>hello</td><td>world</td>’;
alert(hello.innerHTML); // 결과 : helloworld


위의 코드에서는 hello 의 parentNode 가 존재하지 않기 때문에 문제가 생기는 데요,
innerHTML 에서 텍스트 부분만 쏙 빠져서 적용되네요;

모든 종류의 엘리먼트에 대해서 이런 문제가 생기는 건 아닌 것 같고,
조금 테스트 해본 바로는 THEAD, TBODY, TR 엘리먼트의 innerHTML 을 다룰 때 이런 문제가 발생하는 것 같습니다.

내용이 긴데, 3줄 요약하면,

  1. 파이어 폭스에서
  2. parentNode 노드가 존재하지 않는
  3. THEAD, TBODY, TR 엘리먼트의 innerHTML 을 셋팅하면 이상하게 동작한다

DOM 다루실 때 참고해주세요~

영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2008/09/02 16:46 2008/09/02 16:46
, , ,
트랙백 0 : 댓글 6 : RSS

파폭에도 querySelector 함수군이 생김

컴퓨터/웹 2008/07/31 11:41
파폭에도 querySelector 함수군이 생긴다는 소식을
회사 동료를 통해 들었다.
요즘 RSS 구독을 성의있게 안 하다 보니까 새로운 소식에 무뎌지는군;;;

http://www.dustindiaz.com/firefox-31-brings-good-stuff/

이제 저런 함수군을 사파리(WebKit), IE8, FF3.1 에서 (오페라는.. 어떤지 기억이 안남;)
모두 지원하게 되니

슬슬 예전에 만든 CSS 셀렉터엔진을 저런 네이티브 함수를 쓰도록 고쳐야 하는데...
만만찮은 규모의 작업일 듯 싶다;

아으앙
영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2008/07/31 11:41 2008/07/31 11:41
, ,
트랙백 0 : 댓글 2 : RSS

아 제발 옥션...

사는 얘기/잡담 2008/06/17 18:37
파이어폭스에서 돌아가게 해주세요.
그거 안 되면 IETab 썼을때 이상한 window.external 에러라도 안 나게 해주세요 ㅠㅠ
어려운거 아니잖아요 ㅠ

이런데 참고 파이어폭스로 옥션 쓰고 있는 나도 참 대단;
영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2008/06/17 18:37 2008/06/17 18:37
,
트랙백 0 : 댓글 3 : RSS

파이어폭스에서의 uncaught exception: Location.toString 에러 해결

컴퓨터/웹 2007/08/22 10:32

파이어폭스를 사용하다보며 아래 같은 에러가 나는 경우가 있다.

사용자 삽입 이미지


이 에러로 특별한 문제가 생기는 것도 아니고 에러가 어디서 나오는 건지 메시지 로그만으로는 당췌 알 수가 없어서 나중에 알아보자 미루고 있다가,
어제 회사 팀원이랑 같이 왜 그럴까 페이지를 파헤쳐봤다.

일단 찾은 원인 중 하나(다른게 더 있을지는 모르겠다)는, 다음 조건을 모두 만족하는 경우.
  1. HTML 페이지 안에 IFRAME 이 있고,
  2. 그 IFRAME 안에 플래시가 있고,
  3. 바깥 HTML 의 document 와 IFRAME 내의 document 의 도메인이 서로 다를 때.

찾은 해결 방법은, 두개의 페이지의 document.domain 를 맞춰주거나,
플래시가 들어있는 IFRAME 페이지에서

(Language : javascript)
  1. window.onerror = function() { return true; }


이런 식으로 모든 에러를 걍 무시시키는 것.
사실 아직은 정확한 원인도 최선의 해결방법도 모르겠다-_-a


2008년 3월 24일 내용 추가 :


해당 에러만 무시하도록 아래같은 식으로 하면 나야할 에러는 그대로 나니까 디버깅도 문제 없을 듯.

(Language : javascript)
  1. window.onerror = function(err) {
  2.   return (typeof err == 'string' && err.indexOf('uncaught exception: Location.toString') == 0);
  3. };

영양가 있는 포스팅인가요
(총 12분이 투표해서 3.8점) 3.8점
2007/08/22 10:32 2007/08/22 10:32
,
트랙백 1 : 댓글 1 : RSS

메모리귀신 파이어폭스

컴퓨터/웹 2007/04/03 17:38
컴터가 벅벅 거린다 싶어서 보면 꼭 맨 윗자리를 꿰차고 있는 이놈.
예전부터 메모리 많이 먹는다고 얘기 많았던 것 같은데... 요즘 IE 보다 파이어폭스를 훨씬 많이 쓰니까 불편한게 몸소 느껴지네;

사용자 삽입 이미지

당당히 1위를 달리는 파이어폭스!
맨 밑에서 두번째에 있는 오페라 만큼은 못 되도 2위인 Internet Explorer 랑 저토록 많이 차이나는건 자존심 상하는 일이잖아?

파이어폭스3 에서는 딴거 다 제껴 두고라도 이것 좀 해결해주세효
영양가 있는 포스팅인가요
(총 7분이 투표해서 2.4점) 2.4점
2007/04/03 17:38 2007/04/03 17:38
트랙백 0 : 댓글 0 : RSS

파이어폭스에서 Selectbox 옵션 항목 안 넘치게 하기

컴퓨터/웹 2007/04/03 11:39
이런 HTML 코드를 각 브라우저에서 보면...

(Language : html4strict)
  1. <select style="width:100px;">
  2.     <option>후리자</option>
  3.     <option>미역</option>
  4.     <option>씨뎅이</option>
  5.     <option>남태</option>
  6.     <option>졸라긴글졸라긴글졸라긴글졸라긴글졸라긴글</option>
  7. </select>

사용자 삽입 이미지

Internet Explorer


사용자 삽입 이미지

FireFox


사용자 삽입 이미지

Opera


항상 튀어주시는 렌더링의 Internet Explorer.

그리고 사용자들은 디자인적인 이유로 IE 의 Selecbox 렌더링 형태를 선호하는 경우가 있다.
그래서 FF 의 Selectbox 를 IE 처럼 만들어주는 스크립트를 만들었다..

FireFox 전용입니다, 오페라에서는 안돼요. (Language : javascript)
  1. /**
  2. * Fitted Selectbox for FF
  3. * @author hooriza
  4. * @version 0.1
  5. */
  6. function fitSelectbox() {
  7.  
  8.   // for only FF
  9.   if (navigator.userAgent.indexOf("Firefox") == -1) return;
  10.  
  11.   var tags = document.getElementsByTagName("select");
  12.   for (var i = 0, ilength = tags.length; i < ilength; i++) {
  13.    
  14.     var width = tags[i].offsetWidth;
  15.     tags[i].style.width = width + "px";
  16.    
  17.     var options = tags[i].getElementsByTagName("option");
  18.     for (var j = 0, jlength = options.length; j < jlength; j++) {
  19.      
  20.       options[j].style.padding = "0 0 0 3px";
  21.       options[j].style.width = width - 3 + "px";
  22.     }
  23.    
  24.   }
  25. }
  26.  
  27. if (window.addEventListener) {
  28.   window.addEventListener('load', fitSelectbox, false);
  29. }

끗.
영양가 있는 포스팅인가요
(총 4분이 투표해서 3.8점) 3.8점
2007/04/03 11:39 2007/04/03 11:39
, ,
트랙백 0 : 댓글 1 : RSS

Eolas 패치를 하지 않아도 되는 파이어폭스

컴퓨터/웹 2007/01/02 23:20
얼마전(?) 릴리즈 된 파이어폭스 2.0 를 보면서...

"왜 파이어폭스는 eolas 패치를 안 하는거지?"

하고 생각했더랬다.
알고보니 이런 사연(?)이 있었구나... -_-

이미 다들 알고 있었던 건가;;;
왜 난 지금까지 어떤 곳에서도 이런 내용을 볼 수 없었던 거지...

파이어폭스(FireFox)가 대안


이미 밝혀진 것처럼, 파이어폭스가 오픈소스 프로그램인 동안에는 에올라스는 파이어폭스 개발자들에게 MS와 같은 이유로 고소하지 않을 것이다. 에올라스의 창립자인 마이클 도일은 인터뷰에서 다음과 같이 이야기했다.

“우리는 처음부터 비상업적 사용자들에게는 라이선스 로열티를 매기지 않는다는 일반적인 방침을 가지고 있었다. 우리 기술을 상업적으로 이용하는 회사들이 비용을 지불하기를 기대한다. 1995년 이후부터 비상업적인 목적인 경우 무료로 우리 브라우저를 배포했으며, 이는 오픈소스 커뮤니티는 우리에 대해 걱정할 필요가 없다는 것을 보여준다. 우리 제품이 상업적으로 이용되거나 되팔리는 경우, 물론 우리는 우리 기술을 사용하여 돈을 벌고 있는 사람들과 이야기하게 될 것을 기대한다”

그러면, 인터넷 익스플로러는 끝난 게임인가?

영양가 있는 포스팅인가요
(아무도 투표를 안 했어요) 0점
2007/01/02 23:20 2007/01/02 23:20
,
트랙백 0 : 댓글 4 : RSS
◀ PREV : [1] : NEXT ▶