למרות העדפתי לשועל, הטענות הן שעדיין IE הוא ברירת המחדל של הגולש הממוצע (הסטטיסטיקות אצלי, אגב, שונות).
ועל כן כשאני מעברתת תבניות או עושה כל עבודת כתיבת אתרים אחרת אני משתדלת לבדוק בכל הדפדפנים הרלוונטיים.

כפי שידוע לכל כותב אתרים מתחיל, ה IE אינו תומך בסטנדרטים של עיצוב אתרים, ועל כן דף תקין לא בהכרח ייראה באותה צורה ב IE ובשועל, לדוגמה הסרגל הצדדי שלי נראה כמעט לבן ב-IE למרות שהוא למעשה כחלחל…

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

טבלת הפילטרים של קוין סמית היא השלב הראשון והחשוב ביישום הטריקים האלו…
כמה דוגמאות יישימות:
אלמנטים קטנים יותר ב IE
ל-IE יש בעיות עם מודל הקופסא, בעיות אלו עלולות לגרום לחלקים מהדף להיות צרים יותר ב IE.
למשל המבנה הבא:

בעקרון רוחבו של המבנה הוא 50em : תוכן – 30, מסגרת – 2, דיפון – 8, וגבולות – 10.
מאידך, ב IE המסגרת והדיפון נכללים בתוך גודל התוכן ולא מוספים אליו, מה שאומר שגודל התוכן הוא למעשה 20em (מסגרת+דיפון בכל צד), ולכן רוחבו של הdiv הוא רק 40em.

כל עיצוב שהסתמך על גודלו של העימוד לא יראה טוב בעל כל הדפדפנים.
במקרה כזה אנחנו צריכים עיצוב שיתקן את הבעיה עבור כל הגרסאות של IE, על מנת לשמר את העיצוב נשתמש בהאק על IE.
מבט מהיר בטבלה מראה ש IE לא יודע להתמודד עם סגנון html>body, ולכן נשתמש בו.

התיקון שלנו ייראה כך:

שימו לב לתגית השניה, אותה בעצם כל הדפדפנים התקינים קוראים ומפרשים נכון (ועל כן מתקנים את ערך ה width) אבל IE אינו קורא ולכן נשאר עם הערך הראשוני. כתוצאה מהתיקון בכל הדפדפנים רוחבו של המבנה הוא 50em.

המשך – בימים הקרובים.

נהניתם ? הרשמו לעדכוני RSS !