We Keep Coding

How to deal with broken browsers?

I have a general question. I'm working on my first program in JavaScript and while I'm working on them I experienced some weird "broken browser"-problems.
During the weeks of work on my program I tested the project often on different browsers and computer systems. While doing it I observed weird behavior on Firefox and Chrome in specific versions. In both cases the program worked fine in both browsers then suddenly I experienced problems in Firefox on Windows on one machine. After some research I tried to update the browser and the problem was gone. The same experience I had on Chrome on Linux. It worked fine, then suddenly I had problems with Chrome 48. I tested the program on Mac and Windows, everything was fine. Then I recognized that the browsers on this machines has the version 54. So I updated on my Linux machine to the newest version and the problem was gone.
My Question: is it normal that such things happen with specific versions of browsers and if so, how to deal with it if you're working on bigger projects?
Edit: From the answers below I see that I was not clear with my question. The Question is not really about cross-browser compatibility than more about why a programm works in chrome v47, but not in v48, and then it works again in v54. Same for Firefox and other browsers.

You have to read about cross-browser compatibility.
Each browser may have different implemenations of specific functions or even do not have.
For older browsers like IE8 and less even simple window.innerWidth
doesn't work.
jQuery may help you. Its library which effectively provides cross browser compatibility for a lot of cases.
Another way to test if browser support some function is using Modernizr
You can also check support manually by websites like caniuse.com - works mainly for css styles but also js

How to debug web page rendering compatibility issues across browsers?

I am developing a web page primarily using Firefox. Often I encounter that my web page renders properly in Firefox but has some unexpected behavior in Chrome and IE.
Generally if its related to javascript, I usually open Developer Console in Chrome and see if there were any errors and that gives me a clue as to what might be wrong.
Unfortunately, I am generally lost if its a CSS related or HTML element issue.
In one particular case, I have placed a div inside a <td> and I am lost as to why the chrome cannot render it properly irrespective of the fact that firefox is happy and does not complain.
So my question is, how to debug issues related to rendering of HTML pages in Chrome and CSS and determine what might be offending.
My related question is, is there a guidelines to make my web page work in almost all the popular browsers with little effort? I am particularly thinking in terms of tool or process which will warn me of compatibility issues with my web page.

IE (Internet Explorer) and little effort doesn't match to each other, you have to invest more of your time and effort only for IE, illuminate IE and be happy, as a suggestion, use Twitter Bootstrap if possible, it's a ready and tested css framework (maybe framework is not perfect name).
Basically, as far as I know, only a css reset could be used to gain some consistency but still you have to test over different browsers because each has different rendering engine. If you want to keep IE in the list then test the layout for IE at first.
Only for the IE or Inconsistent Exposer (IMO) there is a developer tool available (IE Tester) to test layout (HTML/CSS) over different versions of IE and only works on Windows so it may help you a bit if you are Windows user. There is also an online tester available and sometimes helpful, it's browsershots.org.
Also IE has a debugger/developer tool and pressing F12 will bring it so you may see something like this:
Google Chrome has it's built in debugger/inspector (CTRL + SHIFT + I) and on Firefox you may use Firebug extension and these browsers are not dumb like IE and there are lots of debugging extensions available for these browsers for free, not worried about these good guys.
Generally speaking, IE users are dumb and used to see dumb things on their screen so I don't think too much about them because they really don't know the difference but as a developer you may need to think about it and in this case I would demand extra charge from my clients if they want me to make a site compatible for IE < 10 because it requires extra effort.
You dunno me ? Leh--hoo-zehar (Looser) IE am a legendhhh. Smooky...!

I am not aware of any tool that will warn you because there is no way for a tool to validate the result of what you desire.
As far as how to test HTML/CSS. Chrome supports the most HTML-5 and FF is a close second. If you develop in chrome it normally works in FF and via verse. IE is where the pain is. IE does not support all HTML tags and often will render things wonky. I normally create my webpage and focus on FF and chrome once I like the results I open IE and debug. 98% of the time it is CSS changes that need to be made. I debug CSS first and if I am not able to resolve it with CSS after a decent amount of work I will look into changing the HTML. I try to avoid changing HTML because you have to debug all other browsers again.

Styles and code developed in Chrome will generally work in Safari, Opera(same engine), and IE 10+ with few inconsistencies. You'll get a few rare positioning issues with some CSS3 specs in Firefox, specifically in background positioning. You'll also find some javascript issues unique to Firefox.
IE9 is generally a good sport and usually doesn't have too many issues. IE8 will have a few and they'll be significantly different based on the OS (as there are multiple versions of each IE and they all support different specs for Javascript and HTML) specifically you'll find lots of issues with XP IE8 and really shouldn't support it (Microsoft doesn't even want to).
For the most part you'll be developing to IE inconsistencies unless it's a CSS3 spec with the occasional javascript strangeness (which js frameworks generally can help with since a few of them were made with that goal in mind).
As far as tools, browserstack is nice but doesn't give you a lot of time. If what you're trying to use is modern caniuse is a good place to visit first. Almost all issues between non-IE browsers will be HTML5 or CSS3 specific though.

Cons of using Internet Explorer's Compatibility Mode

What are cons of force a web site viewed in IE to compatible mode? Say we force IE9 to IE8 compatiblity mode?
Performance drawbacks
Can't use any new IE9 specific features like HTML5/CSS3/SVG
Why?
We run legacy web app which is developed since 2000 so it's a mess ball fighting to be compatible with Chrome, Opera, Firefox, IE6/7/8 and now we decide to add IE9 to the list. But with IE9 we run in issues with printing, "Permission deniend" JavaScript errors (probably something about cross-frame JavaScript calls) and next issues - the easy workaround is to force IE9 to behave as a IE8 and then everything works fine. But I am still not sure if it's way to go...

first our app is public site (for our clients)
You have a public website developed in 2000 and it doesn't work on modern browsers? Deprecate it or re-write it.
Don't hack your code to support modern browsers, the website is clearly poorly written and doesn't apply to standards. You can't get away with this.
The only place where you can get away with this level of incompatibility is intranet applications and even then you should simply state "it works on browser X, live with it"
You can't say that to public facing clients. I mean you can try, but have fun losing business to your competitors.
Re-develop your website to match the W3C HTML/CSS standards and the ES5 standards and it will be completely future facing (for some years).
Alas, the way the web works is that anything more then 5 years old is deprecated. So either re-write it every 5 years or get out of the web business.
In terms of actually using compatibility mode, don't. IE6-8 are horrible engines and should be avoided like the plague. If you use them then you can't write future facing standards compliant code.
Your code needs to match the standards and you should fix / shim / patch any browser specific bugs where those browsers don't implement the standards.

You cannot say you have tested in IE6/7/8/9 until you have tested in those different versions. Emulating the test environment is not the same as using the test environment. To my knowledge IE7/8 compatibility modes are the older render engines, not the underlying browser as a whole, bugs and all. It is closed source so you will never know.
Convert Microsoft's free to download virtual disk images for cross-browser testing to Virtualbox images and put them on a machine that just runs Virtualbox. An old machine will do, run the VMs headless and access them with remote desktop. In that way you will be able to test in all browsers without burdening your machine with MS/Spyware.

I believe your system admins can set IE to compatibility mode for all intranet traffic using the Group Policy Editor. Any site you create will from this point forward, you can add a meta tag to force IE9 to render natively and use all the newer features...
I'm having to do that on my current project using the following doctype and meta tag in my header:
<!DOCTYPE HTML >
<meta http-equiv="X-UA-Compatible" content="IE=100" />

Compatability mode is something that MS introduced to give people some chance to upgrade their applications, not for long term use. AFAIU.
If you want your application to be compatible with IE9, then you will have to change it. If you are trying to maintain IE6-9 compatibility then you have a real challenge, and you should consider whether this is really practical - in essence, you need at least 2 distinct sets of html. Is this practical for you?
IE9 compatibility mode is different form IE9 and IE8 - it draws bits from both. So you need to do a full test agaisnt the compatibility mode version, and ensure that it remains working against this.
So in answer to the question, the cons are that you are not being IE9 compatible, and there is a danger that when IE10 comes out, your code will not run against that in any mode. You are putting the effort into compatibilty testing without providing for future changes. You would do better, in the longer term, to make your code IE9 compatible. Also, the message you are giving your clients is that your code base is not going to be compatible for much longer. Unless you are talking to them about a re-work, this is a real negative.
However, it sounds like your entire code needs a re-work, to forget about IE6 and be written for modern working browsers. Using compatibility mode until that happens is probably OK. If you do this - and tell your clients - then staying in compatibility mode is viable.

Using compatibility mode will NOT cause the browser to use the JavaScript engine that was present in the old version of IE.
By that I mean it will run any JavaScript code using the IE9 engine. Which was a problem for us when debugging an old product that had a problem with IE7/8.

Documentation for the DOM, JavaScript & CSS

What's the best place to find full documentation for the DOM, JavaScript, and CSS?

There are many reasons why there isn't just one site that displays every single JavaScript method or function, every DOM manipulative option, or every CSS property. The main reason being that there are multiple browsers with which have different engines.
Most popular engines being used today are:
Trident, Gecko, Webkit, and Presto.
JavaScript and CSS are an "always-in-progress" project, so finding all the available api's might be a little hard to find. Though, there are resources out there to help you with particular browsers.
I find these pretty helpful:
MDN Doc Center (Gecko)
Good for a general use case for just about any browser, though they do provide more info on their specific properties, such as -mos (Gecko) in CSS.
HTML Reference: https://developer.mozilla.org/en/HTML/Element
JavaScript Reference: https://developer.mozilla.org/en/JavaScript/Reference
CSS Reference: https://developer.mozilla.org/En/CSS
DOM Reference: https://developer.mozilla.org/en/Gecko_DOM_Reference
Most popular browsers using the Trident engine: Firefox, Camino, Flock, Seamonkey, Epiphany, Netscape
Webkit
One of my favorite engines to work with! It's what powers Safari and what Chrom is based off.
DOM: https://developer.apple.com/...riJSProgTopics/WebKitJavaScript.html
HTML: https://developer.apple.com/library/safari/.../SafariHTMLRef
CSS: https://developer.apple.com/library/safari/.../SafariCSSRef
Most popular browsers using the WebKit engine: Safari, Google Chrome, Epiphany, Konqueror
Opera Specs (Presto)
Not the most helpful thing in the world, but gives you a good idea of what the presto engine currently supports
Link: http://www.opera.com/docs/specs/productspecs/
Most popular browsers using the Presto engine: Opera Desktop/Mobile/Mini, Nintendo DS, Wii Internet Channel
MSDN (for Trident?)
I rarely design just for Internet Explorer anymore (if at all), but this does look a little promising:
Link: http://msdn.microsoft.com/en-us/library/aa155073.aspx
Most popular browsers using the Trident engine: Internet Explorer, Avant Browser, Maxathon, AOL Browser
If all else fails, refer to W3 (and I don't mean W3 Schools; the two aren't event affiliated):
CSS: http://www.w3.org/TR/CSS/
DOM: http://www.w3.org/DOM/
ECMAScript (where JavaScript derives from) has an official PDF for specifications as well:
JavaScript: http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf

Which web browsers give the most incompatability issues?

I'm not a 100% sure if I should be posting this here but where else can I post it (definitely not Server Fault or Super User) so hopefully it's not too inappropriate.
I am currently developing a script that I hope to release as a plugin for wordpress and other open source content management systems. The script's purpose is to allow web designers to attach stylesheets and javascripts dynamically according to which browser the visitor is using. So if their site looks a little odd in Chrome for example, then they can attach a css or javascript hack just for that one browser. There will be some more features to the script as well but that is the main purpose.
Anyway, I would like to know which browsers to include support for, for that I need to know which one's gives designers/developers the most trouble. Not just the name but also the version (i.e. Internet Explorer 4). Many thanks in advance!

IE6 is by far the most problematic of all browsers. Though it's use is declining month by month, it's still widely used. All IE browsers always suffered from display issues. Sometimes margins are not what they were set to, because you need to go down the css hierarchy to set all margins for it to understand what's going on. You shouldn't need to worry about anything below IE6.

There are many articles on the Net discussing this topic.
Here's an example

All versions of IE...Microsoft never likes to conform to W3C standards so they prefer adding hacks to "conform"
I know Opera browsers don't support CSS3 yet (latest release)....Have fun!

My vote as far as problematic browsers still in prevalent use would have to be IE 6.

Whenever anyone speaks of "browser compatibility issues", in almost all cases, the real problems are with IE. Markup written to web standards generally work well in any other browser save an occasional adjustment, but there are tens if not hundreds of web sites dedicated to hacking and fixing IE while there are none dedicated to doing the same. In fact, there are already javascript libraries for this very thing, getting IE to perform like other more modern browsers, such as Dean Edwards ie7.js and 'maximize' (I think it's called).
Most developers write to standards, test in the modern browsers, adjust if necessary, then, with a shaky hand open IE. Separate CSS and javascript for modern browsers is not necessary. While some may prefer to do so with IE, most of us make do with conditional comments and feed IE what IE needs to right itself.

Most people are designing for IE6+ these days, meaning that they are designing for W3C standards with IE6 bringing up the rear guard. Here's a fantastic site that breaks down all the features browser by browser, from IE6 on up.