1. אין לי יותר מה להסביר בנושא. אני חושב שחזרתי על זה שוב ושוב כבר מספיק פעמים.
הדרך היחידה שתבין את זה היא אם תנסה לשחק עם זה בעצמך ותבין שהmargin הוא כלפיי חוץ מהאלמנט, ולא כלפיי פנים.
ובכל מקרה, לאף אלמנט אין גובה קבוע אלא אם הוגדר אחרת בCSS.

2. הדוגמא שהבאתי אמורה לעבוד טוב בכל דפדפן, לפחות ממה שאני בדקתי.

הרעיון בבניית אתר שייתמך בגירסאות שונות של דפדפנים הוא ליצור אתר/עיצוב שיוצג כראוי לגולש בכל דפדפן, ולא שאלמנטים מסויימים יהיו תלויים בקיימות של המאפיינים ה"מתקדמים" בCSS. ואת זה אפשר לעשות עבור כל דפדפן גם עם המאפיינים הישנים.
אם רוצים לשלב אופציות מתקדמות לדפדפנים ישנים זה כבר סיפור אחר, ואז יש כל מיני דרכים ושיטות גם עם JS, לדוגמא.

3. אין סיבה לבצע חישובים שכוללים אחוזים+פיקסלים.
אם הגדרת לדוגמא אינפוט באורך 80%, מן הסתם שלשאר האלמנטים אתה מתכנן להשאיר 20%.

לגבי החיתוך והתוצאה ברזולוציות/מסכים שונים, את זה פותרים עם css media ולא בצורה מוחלטת על ידי ערך ספציפי אחד.