Options to Solve Browser Compatibility Issues

options to solve browser compatibility issues?

the problem of PIE css3 with ie is not trust issue, in some cases Pie framework does not work because it has not one of the below prerequisites:

1- the initialization path of pie or its prefixes i.e for backgrounds, is not correct.

in this case you should check the path. the best practice is to place pie.htc next to your main page/frame or master page.

2- your final result in IE is rendered in quirk mode.

3- the page doctype is not defined or is not XHTML(transitional or strict) or html5.

for any of aboveproblems it could have a full book of conditions and situations.

but once you used it 3-4 times it becomes natural, although personally i do not suggest using css3 frameworks for IE, because IE is naturally slower than other browsers in most cases and these frameworks make it even slower. and it usually it is not beneficial personally i prefer backward compatibility for my sites. where the content is seen more correctly than nice.

What steps could be taken to avoid cross-browser compatibility issues?

I usually code against Firefox (or Safari) first. That usually produces the best results across browsers other than IE. I then hit IE8, IE7, then finally IE6.
Know what tags are going to cause you trouble and avoid using them at all costs. It's all about how familiar with each browser's issues.
Don't use hacks. Use IE conditional comments. By using conditional comments, you can load one stylesheet for all other browsers, one for IE8, one for IE7, and yet another for IE6 (if you need that kind of granularity to fix your issues). It will give you nice clean stylesheets with as little hack-i-ness as possible.
LitmusApp
There really aren't lines to cross. If you need compatibility, you need compatibility. You just whiddle down your issues as best as you can one at a time until you have something usable.

CSS Browser Compatibility issues

I have a feeling you are running into a box model problem because you are rendering in Quirks Mode. IE7+ and all other browsers uses the W3C box model while IE6 uses the IE Box Model in quirks mode.

The IE box model (known as the traditional box model), includes the padding and border in the width/height of an element.

Under the IE box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 114px.

The W3C box model (which is the standard box model), excludes the padding and border from the width/height of an element.

Under the W3C box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 124px.

Box Models
_{(source: 456bereastreet.com)}

In order to make IE use the W3C box model (which is what every other browser uses), your page needs to be rendered in Strict mode. By default, IE renders in Quirks mode.

In order to trigger Strict mode in IE, you must specify a doctype. You can use any of the following doctypes:

HTML4 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 Strict:

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

XHTML 1.0 Transitional:

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

Your doctype must be the first thing to appear on your page. It is even before the <html> tag, on its own line. (Adding an <?xml> prolog will cause IE to go back in Quirks mode, so remove it if you have one).

More information about Quirks/Strict mode here:

CSS - Quirks mode and strict mode

Though adding a doctype to toggle Standards mode might not fix all your problems, you will at least take a HUGE step in the right direction.

Need Solution for browser compatibility issue

The best way to find out what is 'going on' is to debug the code in the browser.
Firefox has a built in debugger but i prefer to use a third party debugger called Firebug.

Cross browser compatibility issues with HTML form

Just use CSS box-sizing property, it is supported by all browsers and IE>=9. You would need to change the following (only):

input.text {
    height: 50px;
    width: 800px; /* OR even this: width: calc(100% - 100px)  */
    box-sizing: border-box;
    ....
}

Take a look in Fiddle.

Definition of the property value border-box:

The width and height properties include the padding and border, but
not the margin. This is the box model used by Internet Explorer when
the document is in Quirks mode. Note: Padding & border will be inside
of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px
solid black;} RESULT {rendered in the browser} .box {width: 350px;}

You can see these days people drop support to IE8, so at the start of CSS they simply put:

*, *:before, *:after {
    box-sizing: border-box;
}

(and make their life easier).

What Cross-Browser issues have you faced?

Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):

Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.
onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.
You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().
When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).
Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.
Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.
Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)
IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)
I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.
The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.
Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.
In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.
In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.

I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)

Options to Solve Browser Compatibility Issues