با سلام خدمت شما دوستان!
با عرض پوزش به خاطر اینکه مدتی نبودم. تو این چند وقته سرم خیلی شلوغ شده بود و کمتر وقت داشتم. الان یه کم وقت آزاد بیشتر دارم و سعی میکنم بیشتر بنویسم!

طراحي سايت به صورت Cross Browser

از اونجايي که مرورگر InternetExplorer از استاندارهاي وضع شده(W3C) براي طراحي صفحات وب به طور کامل تبعيت نميکند، سايتهايي که با توجه به آن نوشته شده اند در ساير مرورگر ها به هم ريخته ديده مي شوند. (IE is a legacy browser)

با اين مقدمه سعي خواهم داشت تا تفاوت ها را به زباني ساده براي دوستان تشريح کنم و در صورت امکان استانداردها مورد بررسي قرار بگيرد.
از دوستان اهل فن هم انتظار همياري دارم!

مطالب زير مربوط به مقاله Migrate apps from Internet Explorer to Mozilla از سايت Mozilla است:

http://developer.mozilla.org/en/docs/index.php? title=Migrate_apps_from_Internet_Explorer_to_Mozilla

قبل از آغاز مبحث ياداور مي شوم که اکثر موارد زير زماني صحيح است که صفحه وبـتان را با DocType زير معرفي کرده باشيد:

Tooltips:
در مرور گرهاي قديمي اين امکان وجود دارد که براي لينکها با استفاده از ويزگي alt يک ToolTip ايجاد کنيم. در حالي که در استاندارد W3C برا اين منظور ويزگي title در نظر گرفته شده است. 

Old browsers:
HyperLink

W3C standard:
HyperLink

تگ ها جايگزين:
زبان Html داراي تعدادي کدهاي جايگزين براي برخي کاراکترها مي باشد که در آدرس [url]http://www.w3.org/TR/REC-html40/sgml/entities.html[/url] تعريف شده اند. اين کدها معمولا به نقطه ويرگول(;) ختم مي شوند.
مشکل مرورگر هاي قديمي اينجاست اين کد ها را بدون نقطه ويرگول هم قبول ميکنند. 

Old Browsers:
  Foo
   Foo

WSC standard:
  Foo
   Foo

تفاوت در کد هاي ( CSS (Cascade style sheet

ضرورت صحيح بودن Mimetypes در ارسال فايلهاي CSS

برخي تعريف هاي CSS ممکن است به يک فايل مستقيما لينک نداشته باشند و در عوض به يک صفحه وب که براي آن محتويات رو ايجاد ميکند لينک داشته باشد. در اسن صورت بايد حتما Mimetype (با استفاده از اين تعريف نوع محتويات ارسالي تعيين مي شود که آيا متن است يا تصوير يا اطلاعات و ..) بايد کاملا صحيح و برابر text/css باشد. در غير اين صورت ناديده گرفته مي شود.
مثلا مانند زير:

رعايت واحد هاي اعداد
بسياري از صفحات وب واحد هاي اعداد به کار رفته را ثبت نمي کنند که اين يک مشکل در استاندارد W3C شناخته مي شود. براي مثال در تعريف طول يک مقدار حتما بايد واحد طول آن بايد مشخص باشد که عبارتند از
px بر حسب Pixel
pt برحسب Point

 
 
 
 
 
 
 // works in strict mode
 

 
 // will fail in strict mode
 
 
 

به کارگيري CSS در JavaScript
با استفاده از استاندارد w3C مي توان به طور مستقيم به خصوصيات و style ها دسترسي پيدا کرد:

 
 

بر روي هم قرار گيري اشيا
اين قسمت مشکل اکثر طراحان سايت ايراني است پس به آن دقت کنيد:

در CSS اين امکان را فراهم شده است که اشيا بتوانند از محدوده خود خارج شده و بر روي هم قرار گيرند.
براي مثال زماني که طول محتويات يک تگ DIV بزرگتر از طول تعيين شده آن باشد؛ در اين صورت در حالت استاندارد CSS محتويات تگ Div بر روي ساير محتويات سايت قرار خواهند گرفت.( مشکل اکثر طراحان ايراني). اين در حالي است که Internet Explorer اين اجازه را مي دهد که ساير محتويات کنار رفته و جا براي تگ div جهت تغيير اندازه پديد بيايد.

نمونه اي از اين رويداد:


تغيير رنگ لينک ها هنگام فعال بودن (Link Hover)
مدلي که براي تغيير رنگ لينک ها در اکثر سايت ها استفاده مي شود از مدل Internet Explorer تبعيت مي کند. در حالي که اين اشتباه است.
طراحان معمولا از ويژگي a:hover براي تغيير رنگ لينک ها استفاده مي کنند. در اين IE اين ويژگي فقط بر لينک ها اثر ميکند در حالي که در W3C اين ويژگي علاوه بر لينک ها (تگ a) بر Bookmark ها هم اثر ميکند.
اين به اين علت است هر دوي اينها (لينک و Bookmark) با استفاده از تگ A ( حرف اول Anchor) معرفي مي شوند.
مثال زير را در هر دو مرور گر IE و FireFox امتحان کنيد تا به تفاوت پي ببريد:

 
 This text should turn green when you hover over it.
 
 
 This text should change color when hovered over, but doesn't
 in Internet Explorer.
 

اگر از اين وضع راضي نيستيد و مي خواهيد لينک ها رو همانند IE نمايش دهيد
*- به جاي ويژگي a:hover از ويژگي a:link:hover استفاده کنيد.
*- و يا اينکه در Bookmark ها قبل از آغاز متن آن، تگ را ببنديد:

مباحثي که در ادامه مطرح خواهد شد.

تفاوت ها در JavaScript شامل:
تفاوت تاريخ در JavaScript
تفاوت در به کارگيري JavaScript
تفاوت فراخواني رويداد ها در JavaScript
حالت هاي رندر صفحه در مرورگرها (DOCTYPE)
تفاوت در به کارگيري Rich text ها
 

خوش باشید