bu tarayıcılardaki farklılıkların önüne geçmek için neler yapılabilir? nelerden kaçınmak gerek? nelerin yapılması faydalı olur?
Css frameworklere bi el at ama ondan önce pratik yap.
caniuse.com //
responsive design
gerisi de tecrübe.
fixed witdth (sabit genişlik) kullanmak hem uygulamada hem de cross-browser düşününce daha kolaydır.
<body style="text-align-center;">
<div id="container" style="text-align:left; width:960px; margin:0 auto;">
<div id="header"><h1>Logo</h1></div>
<div id="content"><p>Çeşitli şeyler.</p></div>
<div id="footer"><p>Copyright Mopyright</p></div>
</div>
</body>
"width:300px" dediğiniz zaman "width:300px" demişsinizdir, width ve height tarayıcıya göre değişiklik göstermez, genelde form elemanları <select><input> bunlar için hazırladığınız sınıflar değişiklik gösterebilirler.
margin, padding bunlar ie7, safari'de azda olsa farklılık gösterebilirler, @blackdog'un dediği gibi sabit genişlik kullanın. ve ne yaparsanız yapın tüm browserlarda %100 uym almak için tarayıcı tipini alıp kimi özellikleri o tarayıcı tipine göre ayarlamanız gerekebilir.
<!--[if lt IE 7.]>
<link rel="stylesheet" type="text/css" href="css/ie7.css"/>
<![endif]-->
gibi,
ve şu sayfayı öneririm, 960.gs