어떤 크로스 브라우저 문제에 직면 했습니까?

어떤 크로스 브라우저 문제에 직면 했습니까?

---

여러 브라우저 세트를 개발하는 동안 브라우저 구현의 차이로 인해 개발 중에 어떤 문제에 직면 했습니까?

우선 내가 직면 한 것들 중 일부를 나열합니다.

• Firefox의 텍스트 노드는 4K 데이터 만 허용합니다. 따라서 XML Ajax 응답은 하나의 노드가 아닌 여러 텍스트 자식 노드로 분할됩니다. Internet Explorer에서는 괜찮습니다. Firefox의 경우 전체 데이터를 얻으려면 node.firstChild를 호출하기 전에 node.normalize를 사용하거나 node.textContent를 사용해야합니다. 두 가지 모두 Mozilla 특정 메서드입니다.
• Internet Explorer는  또는 HTML char 코드 160을 대체하지 않습니다. 해당 유니 코드를 대체해야합니다.
• Firefox에서 동적으로 생성 된 입력 필드 (document.createElement를 사용하여 생성됨)는 양식 제출시 해당 값을 전달하지 않습니다.
• Internet Explorer의 document.getElementById는 요소 이름이 일치하더라도 요소를 반환합니다. Mozilla는 id가 일치하는 경우에만 요소를 반환합니다.
• Internet Explorer에서 선택 상자에 옵션으로 표시되지 않는 값이 있으면 공백으로 표시되고 Firefox는 첫 번째 옵션을 표시합니다.

---

내가 가진 대부분의 문제는 IE, 특히 IE6에 있습니다. 기억에 남는 인상을 남긴 개인적으로 처리하는 문제 (특정 순서없이) :

• 각 브라우저가 DOM을 약간 다르게 구현하기 때문에 프레임 워크를 사용하여 기본적인 작업을 수행해야합니다. 이것은 IE와 AJAX에서 특히 끔찍하며, 호출을 시작하기 위해 여러 개의 if 블록이 필요합니다. 이상적인 세상에서는 기본적인 작업을 수행하는 프레임 워크없이 JavaScript로 작업 할 수 있습니다.

• IE의 선택에 대한 onChange가 잘못 구현되었으며 선택이 초점을 잃기 전에 실행됩니다 (잘못된). 즉, 키보드 만 사용하는 사용자는이 구현 문제로 인해 불구가되기 때문에 IE로 인해 선택과 함께 onChange를 사용할 수 없습니다.

• 게시물에서 언급했지만 IE가 getElementBy Id ()를 사용할 때 이름으로 요소를 가져 오는 것은 큰 고통 입니다.

• RTL 로케일 (아랍어, 히브리어 등)에서 Firefox는 "text-align : right;"를 구현합니다. 틀리게. 어떤 이유로 컨테이너가 오버플로되면 텍스트가 컨테이너 자체의 오른쪽이 아닌 표시 가능한 컨테이너의 오른쪽에 정렬됩니다 (일부는 일부가 보이지 않더라도).

• 브라우저마다 배열과 객체를 종료하는 방법과 관련하여 서로 다른 수준의 선택성이 있습니다. 예를 들어, Firefox는 [item0, item1,] "과 같은 배열로 괜찮습니다. 그러나이 동일한 코드는 뒤에 오는 쉼표를 싫어하기 때문에 Opera barf를 만듭니다. IE는 배열을 3 개 항목 배열로 만듭니다. 세 번째 항목이 정의되지 않은 상태입니다! 이것은 확실히 나쁜 코드입니다.하지만 동적으로 생성 된 자바 스크립트가 있는데 다시 작성하는 데 큰 고통이었습니다.이게 효과가 있었다면 좋았을 것입니다.

• IE의 hasLayout 과 관련된 모든 것 . 이 속성을 중심으로 끔찍한 고통이 돌아 왔습니다. 특히 그것이 존재하는지 몰랐을 때 말입니다. 해킹을 사용하여 hasLayout을 추가하면 많은 문제가 해결되었습니다. 해킹의 결과로 더 많은 문제가 발생했습니다.

• IE의 부동 소수점은 원하는 방식으로 작동하지 않습니다. 그들은 또한 다른 브라우저에서 성가신 경향이 있지만 적어도 특정 동작을 따릅니다. ;)

• 목록 항목 사이에 추가 공백을 추가하는 IE 는 YUI가 목록을 사용하여 메뉴를 만들기 때문에 고통의 끝이 없습니다. (문제를 완전히 파악하려면 해당 링크를 IE와 다른 브라우저에서 나란히 봐야합니다.)

• IE의 컨테이너에서 텍스트를 래핑하지 않는 데 많은 문제가 있습니다. 다른 브라우저는 "white-space : nowrap"을 훨씬 더 잘 듣습니다. 이것은 크기 조정이 가능한 사이드 바가있는 UI의 문제였습니다. IE에서는 크기를 너무 많이 조정하면 사이드 바 항목이 줄 바꿈되기 시작합니다.

• IE6에는 CSS 선택기 유형이 많지 않기 때문에 DOM을 필요 이상으로 클래스 업해야합니다. 예를 들어 +, : hover, : first-child가 부족합니다.

• 다른 브라우저는 빈 텍스트 노드를 다르게 취급합니다. 특히 Opera로 DOM을 탐색 할 때 노드의 자식을 검색 할 때 빈 텍스트 노드에 대해 걱정해야합니다. 특정 항목을 찾는 경우에는 문제가되지 않지만 특정 입력을 예상하는 코드를 작성하고 브라우저가 해당 입력을 보는 방식이 다른 경우입니다.

• IE6에서 자바 스크립트를 통해 iframe을 동적으로 생성하면 iframe이 컨테이너를 자동으로 채우지 않는 경우가 있습니다 (너비와 높이가 최대로 설정된 경우에도). 나는 아직도이 문제를 해결하는 방법을 모르고 그것에 대한 질문을 게시 할 생각을하고있다.

• IE에서는 <tbody> 요소에 오버플로 CSS를 설정할 수 없습니다. 이는 스크롤 가능한 테이블 (구체적인 <thead> 및 <tfoot> 포함)을 간단한 방법으로 만들 수 없음을 의미합니다.

웹 개발의 최악의 부분은 브라우저 간 문제이기 때문에 나중에이 목록에 더 추가 할 것입니다. 또한 이러한 문제는 끝이 없기 때문에 "나중에이 목록에 더 추가 할 것"을 편집하지 않을 것입니다. :)

---

나에게 정말로 도착하는 유일한 사람 :

• IE6는 여전히 웹 의 약 18 % ( 거의 5 분의 1)에서 사용되고 있으며 문제를 해결하는 데는 시간이 많이 걸리고 엉망이며 실망 스럽습니다. ;) 여기에 나열하기에는 문제 가 너무 많습니다.

문제 자체에 관심이 있다면 QuirksMode.org 는 클라이언트 측 라이브러리로 도약하기 전에 매일 사용했던 놀라운 리소스입니다. 또한 브라우저 간 주제를 효율적으로 처리하는 방법에 대한 많은 이론을 제공하는 John Resig의 The DOM is a Mess presentation at yahoo를 확인하십시오 .

그러나 단순히 문제를 해결하는 데 관심이 있다면 귀하의 질문은 왜 많은 사람들이 jQuery , YahooUI , MooTools , Dojo 등과 같은 클라이언트 측 라이브러리를 사용하는 것을 고려하는지에 대한 훌륭한 예입니다 . 번성하는 커뮤니티, 재능있는 사람 및 기업 지원 프로젝트와 함께 이러한 문제보다는 앱에 집중할 수 있습니다.

다음은 브라우저 간 불만을 피하고이 모든 것을 정말 재미있게 만들 수있는 jQuery 예제입니다.

브라우저 간 마우스 클릭 바인딩

$('#select anything + you[want=using] ~ css:selectors').click(
    function(){ 
       alert('hi');
    }
); 

브라우저 간 HTML 주입

$('#anElementWithThisId').html('<span>anything you want</span>');

크로스 브라우저 Ajax (모든 요청 객체는 여전히 사용할 수 있음 )

$('p.message').load('/folder/file.html');

그리고 정말 나를 놀라게하는 것은 선택기로 데이터 하위 집합을로드하는 것 입니다 (자세한 내용 은 설명서 참조).

$('p.message').load('/folder/file.html body p:first-child');

자,이 모든 것이 실제로 재미있어지기 시작하는 방법 : 함께 메소드 연결

$('ul.menu a').click(           // bind click event to all matched objects
  function(evt){                // stnd event object is the first parameter
    evt.preventDefault();       // method is cross-browser thx to jquery
    $(this)                     // this = the clicked 'a' tag, like raw js
      .addClass('selected')     // add a 'selected' css class to it
      .closest('ul.menu')       // climb the dom tree back up to the ul
      .find('a.selected')       // find any existing selected dom children
      .not(this)                // filter out this element from matches
      .removeClass('selected'); // remove 'selected' css class
  }
)

Joel의 프로그래밍 언어가 이렇게 할 수 있습니까? 조.

이 모든 것을 이론적 수준으로 가져 가면 진정한 발전은 의식적인 생각과 노력으로 할 수있는 일이 아니라 생각이나 노력없이 자동으로 할 수있는 일에서옵니다. Joel은 Smart And Gets Things Done에서 인터뷰 질문 및 똑똑한 개발자와 관련된 부분을 ​​가지고 있으며 프로그래밍에 대한 접근 방식을 완전히 변경했습니다.

모든 키를 알고 있기 때문에 음악을 '연주'할 수있는 피아니스트와 마찬가지로, 당신의 발전은 생각이 필요한 일을 더 많이하는 것이 아니라 생각이 필요하지 않은 일을 더 많이하는 것에서 비롯됩니다. 그런 다음 목표는 모든 기본을 쉽게 만드는 것이됩니다. 자연스럽고 .. 잠재 의식이 .. 그래서 우리는 모두 더 높은 수준의 목표를 엿볼 수 있습니다.

어떤면에서 클라이언트 측 라이브러리는 우리가 그렇게하는 데 도움이됩니다. ;)

---

IE6? Meh. 너희들은 그것을 쉽게 얻었다 ! Netscape 4에서 CSS 레이아웃이 작동하도록 할 필요가 없었습니까 (전체 브라우저를 중단하지 않고)? 테이블을 지원하지 않는 어플라이언스 브라우저 용으로 작성할 필요가 없습니까? IE Mobile 을 위해 글을 써본 적이 없습니까?

• JavaScript 할당 이벤트 핸들러는 지원되지 않습니다. innerHTML에서 "onclick ="somestring ""설정을 통해서만 이벤트 핸들러를 작성할 수 있습니다.

• 대부분의 기본 DOM 레벨 1 속성 (예 : nodeName, nodeType, nodeValue, firstChild, lastChild, nextSibling, previousSibling, data, value, HTMLElement.getElementsByTagName, 모든 HTMLTableElement 멤버, 대부분의 CSSStyleDeclaration 멤버)은 존재하지 않습니다.

• 대부분의 CSS 레이아웃 속성은 작동하지 않습니다. 'width'와 같은 많은 단순한 CSS 속성은 양식 필드와 같은 일부 요소에서 작동하지 않습니다.

• 테이블 및 양식 필드와 같은 요소에 다른 많은 CSS 속성을 설정하면 브라우저가 즉시 중단됩니다. Windows Mobile에는 기본 제공 작업 관리자가 없기 때문에 장치를 소프트 리셋해야합니다.

• 아, 그리고 <button> 안에 텍스트 이외의 것을 넣는 것도 역시 충돌이 일어납니다.

• Netscape 2 (!)까지 거슬러 올라가는 기본 JavaScript 메서드와 "DOM Level 0"메서드의 거대한 덩어리가 없습니다.

그리고 이것은 2009 년 Microsoft의 주력 Windows Mobile 브라우저의 최신 릴리스입니다.

Sure, it supports XMLHttpRequest, but writing AJAX code on a browser whose CSS and script support is less than IE3 (!) is bizarrely schizophrenic, like you're working with a weird amalgam of 21st-century and 19th-century technologies.

I wouldn't recommend it.

---

Been doing this too long to have many problems, but it still drives me nuts that I have to hack around IE's non-support for CSS things like display:table, :last-child, and :hover outside of anchors.

All the IE stuff is still insane, but it's just background insanity now :)

---

Biggest Cross-Browser Issue? - Internet Explorer!

<start_grumpy>

IE is solely responsible for "holding back the web" - us developers can't create amazing sites using HTML5, or SVG, or XFORMS, or CANVAS... not because of Firefox,Safari or Chrome, but because 2/3s of the Internet is still stuck on IE. Not to mention that ~20% of the web is still stuck on IE6! IE8 is the first version of IE to at least try to be standards compatible (2001's standards that is), which means it will be at least 2018 before we can finally start dropping all support for IE7.

</start_grumpy>

Otherwise name a DOM method that IE fully supports... the fact that this is a hard question to answer is my biggest CrossBrowser issue.

getElementById() - badly broken
getElementsByName() - buggy
getElementsByTagName() - buggy
getAttribute() - buggy
setAttribute() - majorly broken
createElement() - buggy
appendChild() - buggy

even things IE invented are messed up...

innerHTML (getting) - returns the worst markup possible
innerHTML (setting) - doesn't work on the elements you'd want to dump a bunch of data into (e.g. Tables and Selects)

---

While developing a system tests framework for a web app we had to simulate various events such as clicks. I remember that we couldn't find any normal way to do it in IE and FF and had to implement it in two different ways with a lot of voodoo around.

I don't remember the specifics, but I remember that it was really annoying.

---

This, basically.

Modern javascript frameworks (jQuery, prototype, etc) have done wonders for getting code working in lots of browsers at once.

The biggest problem I have now is the fact that any sort of rich UI behaviour runs amazingly slowly. IE7 is bad. IE6 is worse. IE8 is buggy, half finished, and really no better than IE7.

The worst thing is that I don't think we'll ever be free of IE6. It was so ubiquitous, and so damn quirky. Loads of 'enterprise' (and by that I mean big web apps made by one big company for another big company) applications used highly specific IE6 javascript that doesn't even work in IE7, never mind anything else.

Companies can't afford to completely replace these apps - we're trying to sell them new ones and that means IE6 support is mandatory. The way it is right now, with credit-crunched companies cutting costs, I reckon we'll still be supporting IE6 in 2015 :-(

---

In internet explorer (note: older versions of IE, not necessarily versions 9/10+), if you create form elements using document.createElement, the field won't be submitted with the form. The only workaround is to use

element.innerHTML = "<input type='text' value="+val+" name="+name+">";

---

In IE, you can not hide select option elements, only the select element itself. This makes it difficult to dynamically change the contents of select options using Javascript.

This problem also exists in Safari and Chrome.

There are many other issues with IE, but this one has caused me the most frustration recently.

---

IE's restrictions on using DOM manipulations on tables forced me to take a completely different approach to something. Very frustrating at the start, but the positive out of it was that the second approach was ultimately better, so I suppose I should be grateful to IE. ;)

---

For Firefox, to get the full data you either need to use node.normalize before you call node.firstChild or use node.textContent, both of which are Mozilla specific methods

Actually all of those are W3C DOM methods supported by the vast majority of browsers. I think you'll find they also work in IE.

My biggest cross-browser issue is that there are people out there still using IE.

Second biggest is that even in standards-following browsers, doing some things in CSS is still impossible; for instance tbody {overflow:auto} does nothing useful in anything but Gecko, and even there it has bugs.

---

Firefox and IE ahve different table setups in the DOM, in one, all siblings of a cell are the other cells, whilst the other has elements between the cells. I can't remember which way around it is, but it gave me a real headache in one application.

---

My biggest problem are browser makers. Arrogant little *^&%s. I mean, you can't sell a browser to anybody, yet everyone is in their little corner trying to out do each other, only creating division. Oh and Chrome. Chrome still doesn't know what it wants to be, Safari or Firefox. Aside from its one parlor trick, its practically useless. I blame all you guys who kept googling just because you hate monopolies. Guess what, they're the monopoly now. Now we can all enjoy second rate, prematurely launched software.

This mostly stems from a bug* I had in Chrome today, it never dawned on me to query the browser. Both Safari and Chrome were failing so I figured hey, once I fixed the Safari problem Chrome would be fixed automatically, but oh no no. Mr."I run tabs in seperate processes" AKA "Sr. No full screen" just had to hold me in the lizard lock with its mind boggling implementation.

I also detest Firefox. I can't tell whether I have a virus infestation or Firebug running. Now until Adobe decides to release a browser that makes Flash practical for things other than movie clips I'm pretty much going to have something to bitch about for a long time. And we all know that's what life is all about.

Also, I only enjoy programming when I encounter ridiculous bugs that make my brain juices run.

---

Inconsistencies in the CSS box model when dealing with forms. In particular it's irritating how each browser handles the <select> Box

---

my only nightmare is IE6 you should always look for hacks but everytime you face a problem with it there is someone who ran into it before you and blogged about it (and we will never get away from it )

---

I was working on CSS layout written by someone who thought that the size given to an element is size+padding+border like in IE5 and not only the content box as explained in official specification. It was written only a few month ago so he did dirty hacks to make it look well in IE7. It took me several hours with FireBug to track down the source of the problem and by the time I realized it I was really annoyed.

If you open site with "floating" CSS written for IE5 in Firefox the boxes just do not have enough space to fit and fall down the page. If you open it in IE7 it looks nice as IE7 lets the borders overlap so it looks almost correct. For someone as inexperienced as me it was hard to note.

---

To remove iframe borders in Internet Explorer you have to specify the frameborder attribute as camelCase format, which is non xhtml compliant.

<iframe frameBorder="0"/>

---

An easy way to help with the pesky IE display issues is to use firebug, Yep enen in IE 6/7/8 Just use Firebug Lite

If you add the following as a bookmark and stick it on your tool bar it will enable firebug lite off any webpage with a single click. (only check this in IE and it works fine.)

javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

참고URL : https://stackoverflow.com/questions/565641/what-cross-browser-issues-have-you-faced