IEとFireFoxの差異

CSSを多用してサイトをデザインしていくと、marginやborderやwidthあたりでブラウザの表示互換に悩まされる。
marginやborderを入れた時に全体のwidthが受ける影響がブラウザによって違う（IEだとmargin分の余白がwidthに吸収されるが、FireFoxだとwidthの外側にmarginが加算される、等）というヤツ。
　
幅780pxで背景画像を使用、内部のコンテンツは背景のデザインにあわせて左に16pxのmarginを入れる必要がある、といった場合、一つのdivでくくってしまうとIEとFireFoxでズレが顕著化する。
IEに合わせて設定するとFireFoxでは全体が右に膨らんでしまう。逆に設定すると、IEで右側にmargin分の余白が発生してしまう。
　
もうね、やめてくれと。
　
調べると色々な手段が提案されている模様。
で、結局私は「２つのdivでくくってしまえばいいぢゃん」という結論に。
背景やwidthやborderを設定したOuterと、内側のmarginや詳細な文字設定を施したInnerに分けることで、容易に互換性を両立できた。
実質１つの要素の設定が２つに分かれるという状態にはなっているが、重複はないし、なによりInnerとOuterそれぞれの内容が簡素になるので可読性もよい、という結果になった。
　
いわゆるCSSハックと言われるトリッキーなコードによる分岐を使うワザも格好いいんだけど、可読性や引き継いだあとのメンテナンスに難がある気がする。というか、一つの要素の宣言が複数存在するというだけでも違和感を感じるから、あまり好きではなかったり。
無論、もっと複雑だったりダイナミックなデザインの場合はCSSハックを積極的に使うべき場面もあるだろうとは思うが・・・。