הבעת IT

כרגיל, אחת לכמה בעיות רבות מוזרים עם IE ו 1 זה חייב דרגות 10 ראש של Quirks של IE.

המסר הבעיה (זו היתה הבעיה שלי, אולי יש לך misbehaviors דומים):
יש לי DIV רבים נמצא בדף עם הכיתה "sectionhead", שאינו אלא שם סעיף בדף. אז יש לי סגנון קצת נראה כמו זה

. Sectionhead {font-size: 18 פיקסלים, הרקע: # cfcfcf: ריפוד: 5px;}

Div הוא בר אפור בהיר עם טקסט קצת שחור. מה קורה ב-IE הוא חלק מאותם כותרות בסעיף מוצגים בסדר, אבל כמה הם בלתי נראים, עד לך לגלול את הדף או ללחוץ על משהו על הדף וכו 'לפעמים הם נוטים להיעלם כאשר אתה לוחץ על "alt" מפתח כאשר הדף כלפי מטה או לגלול עם פס הגלילה. הם לפעמים נראה להופיע שוב כאשר אתה מחדש (F5) את הדף. אני DIV קצר פשוט מושלם עם הסגנון כמה פשוט מתנהג רע.
מה יכול לגרום להתנהגות לא יציבה כל כך? טוב! למען האמת, אין לי מושג!

אפשרי פתרון:
שוב אל תשאלו אותי למה, אבל במקרים רבים בעיה זו נוטה להיעלם כאשר אתה מוסיף מיקום: יחסית MIS מתנהגים בסגנון אלמנטים, כמו זה

. Sectionhead {font-size: 18 פיקסלים, הרקע: # cfcfcf: ריפוד: 5px; קבוצה: קרוב משפחה}

מוזר אבל מה לומר? אלוהים ברך אותי IE!

ו חולקים עם ארה"ב, אם היה לך בעיות דומות.

לא שיש רק Lightbox של כמה שאתה יכול למצוא כאשר גוגל. הבעיה עם רוב תיבות אור שמצאתי היה כי כולם נראו להשתמש באחד או אחרות כבדות משקל של JavaScript במסגרות כמו Prototype JQuery, MooTools ואת אוהבת. כולם קריר swanky מחפש. אבל אם הדרישה שלך היא "אבל אני רוצה סקריפט Lightbox פשוט קל לשימוש באתר שלי", אז הנה היא:

כמה תכונות נחמדות של Lightbox זה

1. קל מאוד
   . 4kb של סקריפטים כאשר ארז (8 KB פרקה)
   ב. 2 קילו של CSS
   ג. שורות של HTML עבור מיכל Lightbox
2. פשוט להבין וליישם
3. אפשר לקבל תיבות אור מרובים על אותו דף.
4. מיכל Lightbox אותה משמש להראות, תוכן שונה (הכלול בנפרד חטיבות מוסתרים הדף), בהתאם הקישור / אפשרות הלחיצה.
5. באופן אוטומטי מרכזי עצמו, לוקח בחשבון את כל גורמים כגון, גובה חלון ורוחב (רזולוציית מסך), כמות בדף הגלילה ועל גובה את תוכן Lightbox
6. נבדק ב-IE 7 ו FF

הצג הדגמה |
הורד מיקוד מקור Lightbox (הורידו 1804 פעמים)

jo.js, jo_pack.js [גרסה ארז]: - סט פשוט של JavaScript חפצים [JO], המכיל, אלמנט החלון מיקום סקריפטים מסמכים. אתה יכול לפתוח JO.JS אם אתה רוצה ללכלך את הידיים עם Javascripting קצת מתקדם, יצירת פונקציות מופשטות, הארכת מאפייני אלמנט וכאלה. אם אין יותר מדי Javascripting, עזוב את זה.

lightbox.js, lightbox_pack.js [נוסח ארז]: - מכיל אור מנהל סקריפטים תיבת. אם אתה מעצב הדף, אחראי גם על יישום Lightbox על הדף, אתה צריך להבין LightBoxManager. LightBoxManager בעצם מכיל רק שתי פונקציות showLightBox ו closeLightBox.

lightbox.css: - אם אתה יודע CSS, אתה יכול לשחק עם סביב lightbox.css להתאים אישית את המראה-n-מרגיש lightbox.css

index.html: יישום לדוגמא של Lightbox 2 עם תוכן שונה

lb_underlay_bkg.png: - זה האור / סימי תמונה שקוף המשמש רקע ביסוד Lightbox [ביסוד היא שכבה מתחת lighbox, אשר מונעת מהמשתמש לחיצה על כל גוף אחר בדף, בעוד Lightbox פתוח]. ניתן להשתמש בכל תמונה או אפילו צבע אחיד למטרה זו, בהתאם לעיצוב הדף את הדרישה.

icon_lb_close.gif: - התמונה להגדלה ידית Lightbox קרוב בפינה הימנית העליונה של תיבת האור. ניתן להשתמש בכל תמונה בהתאם לעיצוב

הצג הדגמה |
הורד מיקוד מקור Lightbox (הורידו 1804 פעמים)

נא לתת לנו את הערותיך ואת המשוב ...

הודעה זו יכולה להיות דוגמה טובה עבור הביטוי "סבתא הוראה למצוץ ביצים" ... כי זה רק חומר בסיסי CSS. אבל לאלה, כמו מתעלם ממני, זה יכול להיות ברכה בתחפושת. תמיד חשבתי (אני יכול לאבד את העבודה שלי אומר את זה), זה היה רק ​​ניתן לשמור על חלק מהתוכן בדף HTML סטטי (כלומר, מעמדה נותר כמות שהוא על חלון גלילה), בעזרת כמה תסריטים חכמים, עושה את כל אלה מדעית חישובים כדי למצוא את המיקום דינמי, השמנה אירועים Window.scroll וקביעת זמנים קצובים וכו '

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

CSS
. סטטי {תצוגה: לחסום; z-index: 10; color: # FFFFFF; הצפת-x: hidden; הצפת-Y: מוסתר; קבוצה: ixed;
}
מס 'תוכן {margin: 0px 100px 150px 160px; גבול: 1px solid # e6e6e6 אנשי

# לעטוף-T {למעלה: 0px; הרקע: # 33CC66, רוחב: 100%, גובה: 55px;}

# לעטוף-l {למעלה: 80px; הרקע: # FF9966; גובה: 300px; רוחב: 150px; הגבול: 2px solid # e6e6e6;}

# לעטוף-b {התחתונה: 0px; רקע: # 3333CC, רוחב: 100%, גובה: 55px;}

# לעטוף-R {למעלה: 80px; הרקע: # 6666FF, גובה: 300px; רוחב: 140px; הגבול: 2px solid # e6e6e6, מימין: 0;}

HTML
id="contents"> <div אתם את תוכן דף העיקריים </ p>
<div id="wrap-b" class="static">
תוכן סטטי בתחתית עמוד
</ P>
<div id="wrap-t" class="static">
תוכן סטטי לראש הדף
</ P>

<div id="wrap-l" class="static">
תוכן סטטי בדף עזב
</ P>
<div id="wrap-r" class="static">
תוכן סטטי בצד ימין עמוד
</ P>

צפה מדגם wroking כאן

הרבה פעמים אנחנו מרגישים צורך לכתוב פריצות הדפדפן specfic (למרות שזה לא מומלץ, אנחנו מפתחים ממשק משתמש צריך לפנות אל רעות כאלה עד מלחמת דפדפנים גדולים מגיע הפסקת אש). מוקדם יותר, אני הזכיר במאמר זה עבור IES בלבד , כיצד לכתוב קטע CSS זה יהיה גלוי הדפדפנים אקספלורר <IE7 בלבד.

אתמול, היה לי מקרה, שבו אני רוצה לכתוב כמה קטעי ספציפי FireFox CSS. טוב! אני לא בטוח אם יש קוד ה-CSS בשביל זה אבל זה HTML. יש לתפוס למרות, זה חתיכת אימות HTML doesnot HTML לעבור. אבל, anywaz! אם אתה תקוע או רע ככזה, אין דרישת שלום, לצורך אימות (מתישהו אנחנו צריכים להיות אכזריים), ניתן להשתמש הבאה להכריז קישור stylesheet FF בלבד או אפילו רק קוד CSS בתוך בלוק זה. הקוד הוא

<comment> שים FireFox בלבד HTML / CSS / סקריפטים כאן </ הערה>

למשל:
<comment>
<style>
/ * סגנונות עבור FF בלבד * /
fieldset {גבול: 1px מוצק # dddddd;}
</ Style>
</ הערה>

אני "מ 'מאושר לרגע ...

נו טוב! בפוסט קודם לכן לפני כמה ימים לגבי אטימות ב IE8, שכחתי לציין נקודה חשובה, כי "אקספלורר 8 במצב חמור אינו מאפשר CSS אטימות".
למי donot מבינים למה אני מתכוון לפי דרך קפדנית, הנה מדריך מהיר .

לעקוף את זה (לפני צוות dev IE מבינים שיש להם דרך סלולה מחדש שגרת עבודה בכל רחבי העולם, עבור אתרי אינטרנט באמצעות Pop-up תיבות אור עם אטימות מסוימת ומחזירים תמיכה אטימות) היא להשתמש תמונה שקופה למחצה ... רצוי בפורמט PNG (יש לי ניסיון רע מקבל שקופים תמונות GIF לעבוד כפי שהם אמורים). ליצור תמונת PNG של צבע ואחוז השקיפות שאתה רוצה, אתה עורך תמונות של האהוב ולהשתמש בו כתמונת רקע כיסוי Lightbox שלך.

כלומר
במקום משהו כזה

. Lighbox_overlay {
צבע הרקע: # FFFFFF;
z-index: 1001;
-Moz-opacity: 0.6;
אטימות: 0.60;
מסנן: אלפא (אטימות = 60);
}

לעשות את זה ....

. Lighbox_overlay {
רקע: (bkg.png) חוזר כתובת האתר;
}

לנסות את זה, לחץ כאן! | להוריד, לחץ כאן!

אם אתה מציג את הדף ב IE8, אז אתה צריך לראות את הרקע המלא לבן אטום מאחורי הודעה זו. אתמול, collegue שלי ציינתי זאת אלי (כפי שאני אחד מאותם אנשים להסתגל לשינויים לאט ובהתמדה ... במיוחד הדפדפנים. אפשר לומר, Im פחדן, אבל שיהיה .... להיות מפתח UI, אני תמיד מחרבנים מפחד גרסאות הדפדפנים החדשים ... אתה יודע מה im tlaking על, נכון?)

ומייצרים מקומות מפגש ביניהן סביב זמן, מנסה למצוא פתרון כדי לתקן את זה ואז מה ...
הפעם כולם הדפדפן שלנו זמן האהובה עשה את זה שוב על ידי הטלת כל תמיכה אטימות CSS. לא סטנדרטי `מסנן: אלפא (אטימות = # #)` תכונת CSS הוסר, נחמדה, אבל הם גם לגמרי שכח להוסיף CSS3 תמיכה אטימות (כמו איך כל דפדפן אחר זה יפה שמרו את זה). אז, בפעם הראשונה מאז אלוהים אמר לנו על CSS אטימות (מאז IE 5.0, אני מניח), דפדפן אינטרנט לא תתמוך אטימות CSS.
ועכשיו הקרם על גבי: מילה רשמית מהקבוצה IE 8? זה "בכוונה" או "נשקול את זה בגירסה העתידית של IE".

נ.ב.: נסה דף זה ב FF, נשבע שזה נראה מגניב!

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

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

אתה יודע כי הבעיה של כולנו מפתחים-CSS יש עם פריסות מתפוררים (השינויים תוכן בלתי צפויים הגורמים עמודים שלמים לעטוף, כאשר אנו משתמשים פריסות צוף) ... טוב! נראה היסטוריה!!
טכניקה זו הפריסה עדיין צעיר מאוד, וצריך לאשפה על ידי כל אותם גורואים-CSS שם בחוץ, לפני שהוא הופך בלתי רגילה בכתב. אני שמח להשתמש בו עכשיו! ... ואני כבר לאמצע של המרת בעייתיים מוקדם יותר / משתנה שלי בלתי בהכרח לתוך פריסות פריסת FAP כבר ... ואני שמח לומר "אנחנו כבר באמצעות מיקום מוחלט פו באתר את הבלוג הזה, כמו גם" ... לך לנסות את זה, עכשיו!

כבוד אריק!

אם ביצעת אי פעם (או עושה 1) תפריט אנכי באמצעות פריטי הרשימה (li) תגיות CSS, אתה עשוי להיתקל, זה עוד באג ב-Internet Explorer, שם IE 6 מוסיף את הפערים האלה בין פריטי רשימה המכילים אלמנטים ברמת הבלוק, כלומר אם יש רווח לבן בין פריטי הרשימה סימון. תודה, אבל לא תודה, גרסת אקספלורר 7 נראה ללא הבאג הזה.
אם כמוני, ועוד רבים וטובים, אתה שייך ללהקה זו של היזמים מתוסכלים, שעדיין צריך לקבל את הפריסות החדשות שלהם, העובדים IE6 מדי, אז זה יכול להיות שימושי. שיהיה לך להסתכל ...

לדוגמא סימון:

<ul id="menu">
<LI> <a href="#"> בית </ a> </ li>
<LI> <a href="#"> אודות </ a> </ li>
<LI> <a href="#"> שירותים </ a> </ li>
<LI> <a href="#"> תיק </ a> </ li>
<LI> <a href="#"> שאלות נפוצות </ a> </ li>
<LI> <a href="#"> צור קשר </ a> </ li>
</ Ul>

אתה יכול ליצור כמה CSS, דומה לזה בהמשך, כדי transfrom סימון מעל לתוך התפריט האנכי ....

מדגם CSS ...
# התפריט {
שולי: 0; padding: 0; הרקע: # FF9900;
רשימת בסגנון מסוג: ללא; רוחב: 150px;
}
# בתפריט li {שולי: 0; padding: 0;}
# התפריט {תצוגה: לחסום;
color: # 555555;
text-decoration: none;
padding: 0 15px;
קו גובה: 2.5, הגבול התחתון: מוצק 1px # fff;
}

את התוצאות תוכלו לראות ...

פתרון הבאג הזה ... (שונה הוסיף / CSS בכתב נטוי מודגש)

# התפריט {
שולי: 0; padding: 0; הרקע: # FF9900; רשימת בסגנון מסוג: ללא; רוחב: 150px;
float: עזבו: / * זה מכיל פריטי רשימה ריחפו * /
}
# בתפריט li {
שולי: 0; padding: 0;
לצוף: עזבו; / * זה מתקן את * /
רוחב: 100%; / * רווח לבן באג ב IE6 * /
}
# התפריט {
לחסום; צבע:: הצגה # 555555;
text-decoration: none;
padding: 0 15px;
קו גובה: 2.5, הגבול התחתון: מוצק 1px # fff;
}

אם doesnot הפתרון הנ"ל נראה לעבוד (מסיבות הידועות רק IE6) ... תנסה בשיטה זו במקום

רק להוסיף סגנונות נוספים רק כדי IE6 סימון שלך ...

<- [אם lt IE 7>
<style type="text/css">
# בתפריט li {display: inline-block;}
# בתפריט li {display: block;}
</ Style>
<[Endif] ->

שים גיליונותסגנון בראש

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

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

את מפרט ה-HTML של W3 גם כי CSS יש לי לכלול בסעיף ראש דף ה-HTML. at the bottom of the page, so it's best not to use it. כמו כן שים לב, ב-IE @import מתנהג כמו שימוש <link> בחלק התחתון של הדף, כך שעדיף לא להשתמש בו.

הימנע משימוש תכונות ספציפיות לדפדפן

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

החצנה לך CSS

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

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

לארוז את קובץ ה-CSS שלך

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

CSS אני יכול חרק על ידי הסרת כל ההערות וכל תו לא רצויים כמו חללים לבנים, newlines וכו '

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

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

למרבה המזל, יש לנו מספיק שיגיונות ב-IE, כי אנחנו נשתמש לטובת החוצה לפרוץ את דרכנו כדי להגיע למטרה שלנו ... כלומר להפוך את ענף כאילו שלה דקות גובה ב IE6

פתרון 1: שימוש האק מדגישות [ ... קרא עוד ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

פתרון 2: שימוש האק בורר ב-CSS מאפיין

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


האק בורר CSS תכונה מנצל את העובדה הדפדפנים מוקדם IE6 tha התעלם atribute-בורר. שים לב את הדרישה של אגף נוסף עם מיכל "someclass" class =. רק נוכחות של התכונה ברמה של חלוקה זו, עוקפת את גובה חזרה אוטומטית של אופרה, מוזילה ו MSIE7 ואילך. IE6, שאינה תומכת סלקטורים atribute, מתעלם ממנה.

הצג הדגמה של האק דקות גובה עבור IE6