2008 10 אוקטובר 2008

לא רק עבור IE - בוררים הילד-CSS לא עובד ב-IE

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

למשל div span> {חלק} CSS, זה אומר "כאשר מרכיב תוחלת הוא ילד (ולא הנכד או הילד הגדול גדול וכו ') של רכיב חלוקה".

אבל השתמשנו זה CON לטובתנו. מבחינה היסטורית, בורר הילד נעשה שימוש כדי להסתיר את פקודות-CSS של IE. פשוט על ידי הנחת html>body לפני כל פקודה CSS IE יהיה להתעלם ממנו:

html>body .foo { CSS commands go here ;}

זה עובד כי <body> תמיד ילד של <html> - זה יכול כמובן אף פעם לא להיות הנכד או נינו של <html> .

כעת, IE 7 מבין בורר ילד, אתה צריך להוסיף תג ההערה ריק מיד לאחר יותר מ סימן IE 7 לאחר מכן לא מבין את זה בורר (מי יודע למה!?) ועל כן לחלוטין להתעלם הפקודה ב-CSS.:

html> /**/ body .foo { CSS commands go here ;}

אם לא כבר ראינו אותם לפני כן, יש לקרוא את הפעולות הבאות, כמו גם


2008 4 אוקטובר 2008

הנעלמים HTML / DIV אלמנטים ב-Internet Explorer [IE]

כרגיל, אחת לכמה בעיות רבות מוזרים עם 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!

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


2008 15 יולי 2008

IE 8 מצב קפדנית אטימות CSS ... לעקוף

נו טוב! בפוסט קודם לכן לפני כמה ימים לגבי אטימות ב 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) חוזר כתובת האתר;
}

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


2008 6 יולי 2008

לא "אטימות" ב IE8

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

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

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


2008 20 יוני 2008

שטח באג לבן ליין / רשימת פריטים (Li) ב IE6

אם ביצעת אי פעם (או עושה 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] ->


2008 12 אפריל 2008

CSS מינימום הצלב דפדפן גובה האק

הודעה 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



2008 15 מרס 2008

קופסאות בחר מעצבנת גלויים דרך חטיבות חלונות קופצים

בבית מספר פעמים, ותוך פריסות עמוד עם חטיבות / תיבות אור קופץ / עצות וכו 'אנו נתקלים במצבים בהם כמה חפצים טופס קורה בחר להיות תחת אלה חטיבות קופץ, על ידי עיצוב זה מראה דרך .... איכס!

טוב! אתה יכול בקלות לתקן זאת על ידי התאמת ערכי z-index שלך כראוי על FF ו IE7. אבל טוב ישן (משחק מלים המיועד) IE6 לא מתנהגת כמתוכנן .... הצג BOX SELECT דרך, גם לאחר החלת כמה גבוהות באופן דרסטי z-index ערכים לאגף החלונות הקופצים ... באסה!!

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

"להסתיר את תיבת SELECT רוז' כשאתה מציג רקע"

פשוט קטע התסריט שלך שבו אתה קופץ להראות שלך, להוסיף חתיכת סקריפט כדי להגדיר את הנראות של תיבת SELECT כדי "מוסתר"

document.getElementById ('my_select') style.visibilty = "סמוי".

וזכור להגדיר אותו מחדש מדוקדקת של אגף החלונות הקופצים

. ("my_select") document.getElementById style.visibilty = "גלוי";

שם "my_select" הוא תעודת הזהות של תיבת גירוי SELECT

מקווה שזה יעזור ...

PS. יש אפשרויות אחרות כמו ofcourse דינמי positionining (באותו גודל כמו שאתה הנפתח) IFRAME מתחת DIV קופץ ... זה עובד היטב, אבל עם תוספת של המון אלמנטים, סקריפטים DOM ו כאבי ראש. השתמשתי פתרון מדי, אם אתה צריך עזרה עם אפשרות זו, תיתן לי. אשמח לעזור!


2008 8 ינואר 2008

תגובות מותנה: עבור Duex IES רק חלקים שלך

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

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

  • Scripting אינו נדרש
  • לדפדפנים

איך עושים את זה?

לעשות משהו ב-IE 5 בלבד
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

לעשות משהו בכל הגירסאות של IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

לעשות משהו בכל הגירסאות של IE חדשות יותר IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

עבור vartiations מותנים נוספים, לקרוא מידע ב-MSDN:
על תגובה מותנה


2007 8 ספטמבר 2007

עבור IES בלבד

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

1. מדגישים האק: -
על פי ההגדרה, CSS 2.1 מפרט מאפשר תחתון ("_") בשנת מזהים CSS. אבל בדפדפנים רבים עדיין נראה להתעלם מכל מזהה המשיך עם תחתון אבל IE. זה באג של IE / תכונה ובכך הופך דרך ברורה מאוד להגדיר מאפייני CSS על IES בלבד. כל כך זוכר, נכס CSS בכתב עם תחתון על תחילת גלוי עבור Internet Explorer (כל הגירסאות של IE אך 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

ההפגנה לאור זאת מדגישים גרזן

כמו כן, גרזן דקות גובה עבור IE6 משתמש גרזן תחתון, לבדוק את


2. (#) Hash Hack: -
כמו להדגיש את גרזן, 1 זה גם הוא על IES Oly, עם הפרש טוב, מזהים הקניין שקדמו עם # על תחילת גלוי על כל הגירסאות של IE, כולל IE7 ו הוא בלתי נראה עבור כל דפדפן סטנדרטי אחר.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

זה גרזן נעשה שימוש יפה להפגין דפדפנים אנכי ליישר פתרון, יש לראות במאמר זה כדי למצוא יותר שלנו


3. CSS עבור IE6 בלבד: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

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


2007 12 יולי 2007

במעבר עכבר האירוע בליגה שקוף ב-IE

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

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

הפתרון הסופי שנראה לעבוד ולא להפריע את הפונקציונליות אני נדרש היה לשים פיקסל 1 חזר / תמונת רקע שקוף בענף זה

טיפשי ...! אבל עכשיו IE נראה מאושר.


NDK הבית | הבעת IT | חך הבעת | Penmenship הבעת | הנוראים הבעת | לבטא את עצמי