I've discover so far that:
stating the
widthin some elements fix issues in IE.and of course using a CSS reset
Do you know any others?
views:
38answers:
2
+1
A:
I'd say that manually setting width would more often than not break things in IE, as a lot of IE versions implement a flawed box model.
I'd also say that a lot of all browser incompatibilities originate from a sub par understanding of the box model and float/clear, block/inline.
Having said that, I of course do not deny that it is IE, rather than the developer, that is the real problem, but I usually seek to avoid browser incompatibilities by using HTML structures that not even IE could miss-interpret, rather than through CSS hacks, and I've found that that is often quite doable.
David Hedlund
2010-05-14 06:10:48
@David Hedlund how can I find out which HTML structures IE can't miss-interpret?
janoChen
2010-05-14 06:14:52
@janoChen: granted, they're not a lot, hey? well there's a lot of trial and error involved, i guess, to get to a place where you habitually write code that'll work cross-browser. x1a4's remark on doctype is especially important. when working with fixed widths, having a container of that width, and applying margin to the child content, instead of having a container of width x and padding on that, will avoid differences in box model implementation. instead of `min-height` you could place a 1px left-floated div of that height inside the element. only float the elements that need to float.
David Hedlund
2010-05-14 06:29:42
a lot of the times it'll work better to clear manually rather than having the elements just wrap due to lack of space. a solid understanding of wrapping when dealing with floats is also good to have. for instance it is a lot of times better to place a right-floated element before left-floated ones, even if after would make intuitively more sense. understand that elements must sometimes contain something in order to occupy any physical space *at all* in IE, and that adding an ` ` to fix that will cause the element to occupy the full height of a space character.
David Hedlund
2010-05-14 06:30:25
a lot of the times, positioning of elements relatively to one another is best achieved with a `position: relative` parent, leaving `top` and `left` unset, and absolutely positioned children. and it is of course helpful to understand the implications of different positionings, on how the element occupies space in its container.
David Hedlund
2010-05-14 06:31:02
+2
A:
Learn about hasLayout
Inline block behavior can be achieved on IE7 by turning on hasLayout, then setting display to inline. This has turned out to be quite useful to me.
Make sure your doctype is present and correct. This alone can save hours of pain.
Use conditional comments anytime you need to hack something especially for IE. PLEASE don't fall into the amateur's habit of adding star/underscore junk in your main stylesheet.
x1a4
2010-05-14 06:12:48