تفاوت های عجیب در کروم و فایرفاکس

مرورگرهای مختلف مقادیر اولیه متفاوتی رو برای عناصر دارند، برای همین، شما زمانی که کدنویسی css رو انجام میدین ابتدا از کدهای مقادیر اولیه (css reset ) استفاده کنید.
مثال: https://dev.to/hankchizljaw/a-modern-css-reset-6p3

خط هم درست گفتید، ابتدا اولین نوع خط رو بررسی میکنه، اگر موجود بودش که بکار می بنده، وگرنه نوع خط دوم رو بررسی می کنه و بهمین ترتیب پیش میره. ایرادی نداره.

آیا کدهای CSS Reset رو در پروژتون وارد کردید؟ معمولا یکسری تنظیمات پیش فرضی برای بعضی از المنت های خاص وجود داره مثل padding و margin و ... و متاسفانه این موارد در مرورگرهای مختلف با هم تفاوت هم دارند.

For example, just now I popped a <button> onto a page with no other styling whatsoever. Chrome applies padding: 2px 6px 3px; – Firefox applies padding: 0 8px;. A CSS reset would apply new padding to that element, so that all browsers are consistent about what they apply. There are loads of examples like that.

به همین خاطر میان یکبار همه چی رو دستی Reset میکنند تا نقطه شروع همه شون یکجا باشه. بعد بصورت دستی موارد مورد نیاز رو تنظیم میکنند.

نمونه کد CSS Reset:
https://gist.github.com/DavidWells/18e73022e723037a50d6

این هم توضیحات بیشتر:
https://css-tricks.com/reboot-resets-reasoning/

@mhyeganeh

ممنون از هر دو عزیز من خودم css reset داشتم و حتی normalize که بسیار معروف هم هست رو تست کردم ولی با کمک css reset زیر یکی از مشکلات حل شد منظورم همینه. با مشکلات دیگه باید کنار بیام فک کنم :)
https://gist.github.com/DavidWells/18e73022e723037a50d6

@imaniy
سلام و وقت بخیر
دوستان درست گفتند که باید از CSS reset استفاده کنید
ولی خب بعضی از تفاوت ها رو نمیشه کاری کرد
مثلاً توی لینوکس ، رنگ قرمز توی دو مرورگر کروم و فایرفاکس یکسان نیست ، و کل این دو رنگ از همین قرمز توی ویندوز تیره تر هستند 😅
فکر میکنم شیوه رندرشون فوق داره
موفق و سلامت باشید
یا حق