معربا عن تكنولوجيا المعلومات

كما جرت العادة، واحدة من بعض المشاكل الكثيرة غريب مع شركة آي إي، وهذا واحد لا بد صفوف في العلوية 10 من المراوغات IE.

بيان المشكلة (وهذا كان مشكلة لي، ربما لديك misbehaviors مشابهة):
لدي كثير من DIV في الصفحة مع فئة "sectionhead"، التي ليست سوى عنوان المقطع على الصفحة. لذلك لدي بعض نمط يبحث مثل هذا

. sectionhead {حجم الخط: 18px؛ خلفية: # cfcfcf؛ الحشو: 5PX؛}

وDIV هو شريط رمادي فاتح مع بعض النص الأسود. ما يحدث في IE هو يتم عرض بعض من هذه الرؤوس قسم موافق، ولكن بعضها غير مرئي، وحتى، التمرير الصفحة، أو انقر شيء على الصفحة وما إلى ذلك في وقت ما أنها تميل إلى أن تختفي عند النقر على "بديل" المفتاح عند أسفل الصفحة أو التمرير مع شريط التمرير. ويبدو انهم في بعض الأحيان، ليعاود الظهور عند تحميل (F5) في الصفحة. أنا قصير 1 DIV بسيط تماما مع بعض أسلوب بسيط يتصرف الكريهة.
ما الذي يمكن أن يسبب مثل هذا سلوك خاطئ؟ حسنا! بصراحة، ليس لدي أي فكرة!

ممكن الحل:
مرة أخرى لا تسألني لماذا، ولكن في كثير من الحالات هذه المشكلة يميل إلى أن تختفي عند إضافة موقف: نسبة إلى سوء تصرف عناصر النمط، مثل هذا

. sectionhead {حجم الخط: 18px؛ خلفية: # cfcfcf؛ الحشو: 5PX؛ الموقف: النسبية}

غريب ولكن ماذا أقول؟ بارك الله لي من شركة آي إي!

وتفعل مشاركتها مع الولايات المتحدة، إذا كان لديك مشاكل مشابهة.

ليس هناك سوى عدد قليل من العلبة الخفيفة والتي يمكنك أن تجد عند البحث. وكانت هذه المسألة مع معظم lightboxes التي وجدت أنها بدت جميع لاستخدام واحد أو الآخر JAVASCRIPT الوزن الثقيل مثل أطر النموذج، مسج، MOOTOOLS ويحب. انهم جميعا بارد وفاخر تبحث. ولكن إذا كان الشرط الخاص بك هو "لكني أريد ان SCRIPT الاليكتروني بسيط وخفيف الوزن لموقعي"، ثم هنا هو؛

بعض ملامح لطيفة من هذه العلبة الخفيفة

1. خفيف جدا
   أ. 4KB من مخطوطات عندما معبأة (8 كيلوبايت مفتوح)
   ب. 2 ك من CSS
   ج. بعض أسطر HTML للحاوية الاليكتروني
2. بسيطة لفهم وتنفيذ
3. يمكن أن يكون Lightboxes متعددة على نفس الصفحة.
4. يتم استخدام الحاويات الاليكتروني نفسه لإظهار، والمحتوى المختلفة (والتي يتم تضمينها على حدة الانقسامات كما المخفية في الصفحة)، وهذا يتوقف على الرابط / الخيار الذي يتم النقر.
5. مراكز نفسه تلقائيا، مع الأخذ في الاعتبار جميع العوامل مثل ارتفاع النافذة والعرض (دقة الشاشة)، مبلغ صفحة التمرير وارتفاع محتويات العلبة الخفيفة
6. اختبرت في آي إي 7 و FF

عرض تجريبي |
تحميل الكود المصدر الاليكتروني (التحميل 1810 مرات)

jo.js، jo_pack.js [نسخة معبأة]: - مجموعة بسيطة من الأشياء جافا سكريبت [JO]، الذي يحتوي على العنصر، نافذة ومخطوطات وثيقة لتحديد المواقع. يمكنك فتح JO.JS إذا كنت ترغب في الحصول على أيديكم القذرة مع بعض Javascripting متقدمة، وخلق وظائف مجردة، وتمتد خصائص العناصر وتلك. إذا كنت لا أكثر من اللازم في Javascripting، تترك وحدها.

lightbox.js، lightbox_pack.js [نسخة معبأة]: - تحتوي على ضوء النصوص مدير مربع. إذا كنت مصمم الصفحة، ومسؤول أيضا مع تنفيذ صندوق الضوء على الصفحة، تحتاج إلى فهم LightBoxManager. LightBoxManager يحتوي أساسا مجرد وظيفتين showLightBox وcloseLightBox.

lightbox.css: - إذا كنت تعرف CSS، يمكن أن تقوم به في جميع أنحاء مع lightbox.css إلى تخصيص مظهر-N-يشعر lightbox.css

index.html و: تنفيذ عينة من صندوق الضوء مع اثنين من محتوى مختلف

lb_underlay_bkg.png: - وهذا هو الضوء / سيمي صورة شفافة يستخدم الخلفية لبطانة صندوق الصور [البطانة هي طبقة تحت lighbox، والذي يمنع المستخدم من النقر على أي كيان آخر في الصفحة، في حين أن العلبة الخفيفة مفتوحة]. يمكنك استخدام أي صورة أو حتى بلون واحد لهذا الغرض، وهذا يتوقف على تصميم صفحة ومتطلبات.

icon_lb_close.gif: - صورة عن وثيقة مقبض العلبة الخفيفة على اليمين أعلى مربع الضوء. ويمكن استخدام أي صورة وفقا للتصميم

عرض تجريبي |
تحميل الكود المصدر الاليكتروني (التحميل 1810 مرات)

واسمحوا لنا أن تعليقاتك وملاحظاتك ...

وهذا قد يكون آخر مثال جيد لعبارة "الجدة التدريس لامتصاص البيض" ... هذا هو السبب الأساسي فقط CSS السخافات. لكن بالنسبة لأولئك، مثل لي غافل، وهذا قد يكون نعمة مقنعة. كنت أعتقد دائما (أنا يمكن أن يفقد وظيفتي لقوله هذا)، كان من الممكن الوحيد للحفاظ على جزء من محتوى صفحة HTML ثابتة (معنى، وموقفه لا يزال كما هو في تمرير النافذة)، وذلك باستخدام بعض النصوص الذكية، وتفعل كل تلك العلمية الحسابات لإيجاد موقف ديناميكي، محاصرة الأحداث وتحديد مهلة Window.scroll الخ

لم أفكر يمكن أن بسيطة مثل هذا .... هنا في أقل من المغلق / HTML، ولدي أربع كتل جامدة، واحدة ثابتة على كل extrimities من الصفحة، أعلى، يمين، أسفل وإلى اليسار ... وغني عن القول ... يمكنك اختيار أي واحد أو أكثر إذا اقتضى الأمر ...

CSS
. ثابت {العرض: كتلة؛ Z-الفهرس: 10؛ اللون: # FFFFFF؛ تجاوز-X: خفي؛ تجاوز ص: خفية؛ الموقف: ixed؛
}
محتويات # {هامش: 100px 150px 160px 0px؛ الحدود: 1px الصلبة # e6e6e6}

# لف-T {الأعلى: 0px؛ خلفية: # 33CC66؛ العرض: 100٪؛ الطول: 55px؛}

# الختامية ل {الأعلى: 80px؛ خلفية: # FF9966؛ الطول: 300px؛ العرض: 150px؛ الحدود: 2px الصلبة # e6e6e6؛}

# الختامية ب {أسفل: 0px؛ خلفية: # 3333CC؛ العرض: 100٪؛ الطول: 55px؛}

# لف-R {الأعلى: 80px؛ الخلفية: # 6666FF؛ الطول: 300px؛ العرض: 140px؛ الحدود: 2px الصلبة # e6e6e6؛ حق: 0؛}

HTML
id="contents"> <div أنت محتويات الصفحة الرئيسية </ div> المصدر:
<div id="wrap-b" class="static">
ثابت المحتوى في أسفل الصفحة
</ div> المصدر:
<div id="wrap-t" class="static">
ثابت المحتوى على أعلى الصفحة
</ div> المصدر:

<div id="wrap-l" class="static">
غادر محتوى ثابت في الصفحة
</ div> المصدر:
<div id="wrap-r" class="static">
ثابت المحتوى على حق الصفحة
</ div> المصدر:

عرض عينة wroking هنا

كثير من الأوقات نشعر بالحاجة إلى الكتابة الخارقة المتصفح specfic (رغم أنها ليست ممارسة جيدة، ونحن المطورين واجهة المستخدم تضطر الى اللجوء الى هذه الشرور حتى حروب المتصفحات الكبيرة تأتي الى هدنة). في وقت سابق، وكنت قد ذكرت في هذه المقالة للحصول على الكيانات المستقلة الخاصة بك فقط ، وكيفية كتابة قصاصة CSS التي من شأنها أن تكون واضحة للمتصفحات IE <IE7 فقط.

أمس، كان لي قضية، حيث أردت أن أكتب بعض محددة فايرفوكس CSS قصاصات. حسنا! ولست متأكدا إذا كان هناك رمز المغلق لهذا ولكن هناك HTML. ثمة الصيد الرغم من ذلك، هذه القطعة من التحقق من صحة HTML لا يتلقى تمريرة HTML. ولكن، anywaz! إذا كنت عالقة سيئة أو على هذا النحو، ليس لديهم فيما يتعلق مقابل التحقق من الصحة (في وقت ما لدينا لتكون قاسية)، يمكنك استخدام التالية لاعلان وصلة لأنماط فرنك فرنسي فقط، أو حتى مجرد رمز المغلق ضمن هذه المجموعة. الشفرة

ضع <comment> فايرفوكس فقط HTML / CSS / مخطوطات هنا </ تعليق>

على سبيل المثال
<comment>
<style>
الأنماط * / * لفقط FF /
fieldset {الحدود: 1px # dddddd الصلبة؛}
</ النمط>
</ تعليق>

أنا "انا سعيد لحظة ...

أوه حسنا! في آخر في وقت سابق من بضعة أيام بشأن عودة التعتيم في IE8، نسيت أن أذكر نقطة مهمة ان "IE 8 وضع صارم لا يسمح للغموض CSS".
بالنسبة لأولئك الذين متأكدا فهم ما أعنيه الوضع الدقيق، هنا هو البرنامج التعليمي سريع .

عمل حول إلى هذا (قبل فريق ديف IE يدركون أن لديهم مهدت الطريق لإعادة العمل الروتينية في جميع أنحاء العالم، لمواقع على شبكة الانترنت باستخدام المنبثقة lightboxes مع بعض غموض، ووضع مرة أخرى الدعم للغموض) هو استخدام صورة شبه شفافة ... ويفضل في شكل بابوا نيو غينيا (وقد أتيحت لي تجربة سيئة الحصول على صور GIF شفافة للعمل كما كان من المفترض أن). خلق صورة PNG من لون والنسبة المئوية للشفافية تريد، وأنت لديك في محرر الصور واستخدامها كصورة خلفية لغطاء صندوق الصور الخاصة بك.

أي
بدلا من شيء من هذا القبيل

. lighbox_overlay {
لون الخلفية: # FFFFFF؛
ض مؤشر: 1001؛
MOZ--التعتيم: 0.6؛
غموض: 0.60؛
فلتر: ألفا (شقاف = 60)؛
}

القيام بذلك ....

. lighbox_overlay {
خلفية: رابط (bkg.png) تكرار؛
}

أن تحاول ذلك، انقر هنا! | لتحميل، اضغط هنا!

إذا كنت تعرض هذه الصفحة في IE8، ثم يجب أن تكون رؤية كاملة خلفية بيضاء غامضة وراء هذا المنصب. أمس، collegue بلدي وأشار هذا إلى لي (وانا واحد من هؤلاء الناس الذين التكيف مع التغيرات ببطء ولكن بثبات ... المتصفحات خاصة. يمكن القول، ام جبان، ولكن فليكن ذلك .... ويجري تطوير واجهة المستخدم، وأنا دائما القرف خائفة من إصدارات جديدة للمتصفح ... تعرف ما ايم حول tlaking، أليس كذلك؟)

حفرت في جميع أنحاء لبعض الوقت، في محاولة لايجاد حل لاصلاحها ثم ما ...
هذه المرة لم يفعل لدينا كل الوقت المفضل المتصفح في كل مرة أخرى من خلال إسقاط جميع أشكال الدعم للغموض CSS. وغير القياسية `فلتر: ألفا (عتامة = # #) 'تمت إزالة السمة المغلق، ونيس، ولكنها أيضا نسي تماما لإضافة CSS3 الدعم التعتيم (مثل الطريقة التي لطيف كل المستعرض أخرى واصلت فيه). لذا، للمرة الأولى منذ حدثنا الله عن التعتيم المغلق (منذ أي 5.0، وأعتقد)، ومتصفح ويب لا يدعم CSS التعتيم.
والآن لكريم على رأس: كلمة رسمية من فريق 8 آي إي؟ انه "من تصميم" و "سننظر في هذه النسخة المستقبلية من شركة آي إي".

PS: جرب هذه الصفحة في FF، أقسم أنه يبدو أنيق!

عندما قرأت هذه المقالة على قائمة بصرف النظر " الموضع المطلق فو
من قبل اريك سول "، وكنت لا شيء أقل من أعجب. وكان أيضا من الاكتئاب أنا مجورلي، تسبب، بصراحة كنت أتساءل، لماذا أنا غير قادر على الخروج بشيء رائع لأن هذا.

عادة، عندما كنا إنشاء تخطيطات المغلق، ونحن نستخدم "الموقف" أو "تعوم"، أو مزيج من سيئة للغاية على حد سواء. اريك سول وفريقه تعريف بجانب أسلوب مثالي من نوع جديد من تقنية تخطيط المغلق، والتي تكون قد معمد ك "الموضع المطلق فو" بعد تقنية فو الأعمدة التي تحاكي وجود عمود.

تعلمون ان مشكلة لنا جميعا المطورين المغلق لديها مع تخطيطات التفكك (يتغير محتوى غير متوقعة التي تسبب الأعمدة بأكمله إلى التفاف، عندما نستخدم تخطيطات تعويم) ... حسنا! ويبدو التاريخ!
هذه التقنية تخطيط لا يزال صغيرا جدا، وعليه أن الحضيض من قبل جميع هؤلاء المعلمون المغلق هناك، وقبل أن يصبح معيارا للامم المتحدة مكتوب. انا سعيدة لاستخدامها الآن! ... وأنا بالفعل في منتصف تحويل لي اشكالية في وقت سابق / العائمة من الامم المتحدة وتخطيطات بالضرورة إلى تخطيط يندرج بالفعل ... ويسعدني أن أقول: "نحن بالفعل باستخدام الموضع المطلق فو لهذا الموقع بلوق وكذلك" ... اذهب تحاول ذلك، الآن!

شهرة اريك!

إذا كان لديك من أي وقت مضى (أو إجراء واحد) إلى قائمة عمودي باستخدام عناصر قائمة (لي) به والمغلق، فقد تواجه، بعد هذه علة أخرى في Internet Explorer، حيث IE 6 إدراج هذه الفجوات بين عناصر القائمة التي تحتوي على عناصر مستوى الكتلة، أي إذا كان هناك أي المسافات بين عناصر القائمة في العلامات. شكرا، ولكن بفضل لا، إصدار IE 7 يبدو خالية من هذا الخطأ.
إذا مثلي، وغيرها الكثير، كنت تنتمي إلى هذه الفرقة من المطورين المحبطين، الذين لا تزال لديها للحصول على تخطيطات الجديدة، والعمل في IE6 جدا، ثم وهذا قد يكون مفيدا. إلقاء نظرة ...

عينة العلامات:

<ul id="menu">
<LI> <a href="#"> الرئيسية </ a> </ لى>
<LI> <a href="#"> عن </ أ> </ لى>
<LI> <a href="#"> خدمات </ أ> </ لى>
<LI> <a href="#"> حقيبة </ أ> </ لى>
<LI> <a href="#"> مساعدة </ أ> </ لى>
<LI> <a href="#"> الاتصال بنا </ a> </ لى>
</ UL>

هل يمكن أن تخلق بعض المغلق، على غرار ما سيأتي، على transfrom العلامات أعلاه في القائمة رأسي ....

عينة المغلق ...
# القائمة {
هامش: 0؛ الحشو: 0؛ خلفية: # FF9900؛
قائمة على النمط من نوع: لا شيء؛ العرض: 150px؛
}
# القائمة لى {هامش: 0؛ الحشو: 0؛}
# قائمة 1 {العرض: كتلة؛
اللون: # 555555؛
النصوص الديكور: لا شيء؛
الحشو: 0 15px؛
خط الطول: 2.5؛ الحدود القاع: 1px الصلبة # FFF؛
}

النتائج التي سوف نرى ...

حل لهذا الخطأ ... (تعديل / إضافة CSS بخط مائل جريئة)

# القائمة {
هامش: 0؛ الحشو: 0؛ خلفية: # FF9900؛ قائمة على النمط من نوع: لا شيء؛ العرض: 150px؛
تعويم: غادر؛ / * هذا يحتوي على عناصر قائمة تعويم * /
}
# القائمة لى {
هامش: 0؛ الحشو: 0؛
تعويم: غادر؛ / * هذا حل * /
عرض: 100٪؛ / بقة بيضاء * في IE6 * /
}
# قائمة 1 {
عرض: كتلة؛ اللون: # 555555؛
النصوص الديكور: لا شيء؛
الحشو: 0 15px؛
خط الطول: 2.5؛ الحدود القاع: 1px الصلبة # FFF؛
}

إذا كان لا يتلقى الحل أعلاه يبدو للعمل (لأسباب معروفة للIE6 فقط) ... جرب هذه الطريقة بدلا من ذلك

فقط إضافة هذه الأساليب إضافية فقط IE6 إلى العلامات الخاصة بك ...

<- [إذا LT IE 7>
<style type="text/css">
# القائمة لى {العرض: مضمنة لبنة؛}
# القائمة لى {العرض: كتلة؛}
</ النمط>
<[ENDIF] ->

وضع معدات الشكل في الأعلى

إذا كنت ترغب في الصفحة ليتم تحميلها تدريجيا، وهذا هو، ونحن نريد للمتصفح لعرض محتوى كل ما لديه في أقرب وقت ممكن، وضع المغلق في الجزء العلوي من الصفحة داخل الرأس وثيقة. هذا يجعل من صفحات يبدو أن تحميل أسرع، وهذا يسهل تقديم التدريجي للصفحة. وهذا هو المهم وخاصة بالنسبة للصفحات مع الكثير من المحتوى وبالنسبة للمستخدمين على اتصالات أبطأ الإنترنت.

انها لحقيقة موثقة أن لتعزيز خبرة المستخدم بشكل عام، من المهم أن توفر مؤشرات التقدم والتغذية المرتدة البصرية. لتجنب الاضطرار إلى إعادة رسم عناصر الصفحة، في حالة إذا كان من أنماط التغيير، وبعض برامج التصفح، بما في ذلك آي إي، وكتل جعل من الصفحة حتى يتم تحميلها بالكامل المغلق. بسبب هذا، المستخدم ليحصل على رؤية صفحة بيضاء فارغة.

وW3 المواصفات HTML "تنص أيضا على أن لا بد لي CSS تدرج في القسم الرئيسي من صفحة HTML. at the bottom of the page, so it's best not to use it. لاحظ أيضا أنه في IE @import سلوك نفس باستخدام <link> في أسفل الصفحة، لذلك فمن الأفضل عدم استخدامه.

تجنب استخدام ميزات مستعرض معين

المرشحات: استخدام فلتر يزيد من استهلاك الذاكرة ويتم تطبيقها لكل عنصر، وليس في صورة، لذلك يتم ضرب هذه المشكلة. أيضا، فلاتر هي الملكية آي إي، وبالتالي لا تعمل على النحو المنشود في المتصفحات الأخرى. إذا كنت تريد خلفيات شفافة أو الانحدار، واستخدام 1Pixel مع الصور.
التعبيرات: تعبيرات CSS هي سمة لطيفة في المغلق، لكنه لا يزال ميزة معينة آي إي. أيضا، من المهم أن نلاحظ أن هذه التعبيرات هي تقييم تمريره عندما يتم تقديم الصفحة وتغيير حجمها، وحتى عندما يقوم المستخدم بتحريك الماوس فوق صفحة. وغني عن القول هذا يمكن أن تؤثر على أداء موقعك. وبالتالي في كلمات بسيطة، وتجنب استخدام تعبيرات CSS، إلا إذا كنت تشعر إيجابياته، يزن أكثر من سلبيات لها "

الخارجى كنت CSS

وسوف تستخدم CSS خارجي يؤدي إلى سرعة تحميل من صفحات لأن الملفات جافا سكريبت والمغلق يتم مؤقتا من قبل المتصفح. الحصول على تحميل CSS مضمنة في مستندات HTML في كل مرة يطلب من وثيقة HTML. وهذا قد يقلص في الواقع عدد من طلبات HTTP التي كنه يزيد في وقت لاحق من حجم وثيقة HTML. CSS خارجي يتم مؤقتا من قبل المتصفح، يتم تقليل حجم المستند HTML دون زيادة عدد طلبات HTTP.

يرجى ملاحظة أنه إذا كان المستخدمون في موقعك وجهات نظر متعددة الصفحات في كل دورة، والعديد من الصفحات الخاصة بك إعادة استخدام النصوص نفسها، ومعدات الشكل، وهناك قدر أكبر من الفائدة المرجوة من الملفات الخارجية مؤقتا.

حقيبتك ملف CSS

التعبئة أو الطحن المغلق الخاص بك هو ممارسة لإزالة الأحرف غير الضرورية من رمز لتقليل حجمها وبالتالي تحسين مرات الحمل.

لا يمكن للCSS مطحون لي عن طريق إزالة جميع التعليقات وعلى أي شخصية غير مرغوب فيها مثل المساحات البيضاء، newlines الخ

إضافة IE 6، وكانت MSIE نوع ما يكفي لنا مطوري واجهة المستخدم من خلال إضافة عدد قليل من أكثر خصائص CSS القياسية لمعظم متصفحات القياسية الأخرى. خاصية واحدة مفيدة من هذا القبيل في "ارتفاع مين". الخاصية جميلة على التوالي إلى الأمام لا يحتاج إلى شرح طويل ينضب. عندما يتم تعيين مين ارتفاع للتقسيم، فإنه يحتفظ دائما أن ارتفاع مجموعة عندما يكون المحتوى من منازل تحتل أقل مما يستطيع تحمله، والأهم (على عكس سهل الفانيليا الممتلكات "ارتفاع") جداول أو بعبارة المغلق، فإنه يتصرف مثل ومن المقرر تقسيم الذين "الارتفاع" إلى "تلقائي" ...

بالنسبة للبعض منا مطوري الفقراء، الذين لا تزال هناك حاجة إلى رمز CSS التي يجب أن تعمل أيضا في IE6، ويمكن من الامم المتحدة وتوفر "مين ارتفاع"، يثبت وجود سدادة تظهر في وقت ما ... متأكدا اليأس.

لحسن الحظ، لدينا ما يكفي من المراوغات في آي إي، وأننا سوف تستخدم لمصلحة الخروج والإختراق من خلال طريقنا لتحقيق هدفنا ... أي جعل تقسيم شعبة وكأن لها مين ارتفاع في IE6

حل 1: استخدام المأجور نؤكد [ ... اقرأ المزيد ]

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

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

---

الحل 2: استخدام المأجور المغلق محدد سمة

.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>


وهاك المغلق محدد سمة يستفيد من حقيقة أن برامج التصفح في وقت سابق من IE6 ثا تجاهلت atribute-محدد. لاحظ شرط آخر تقسيم الحاويات مع "someclass" الطبقة =. فقط presense السمة فئة لهذا التقسيم، يتجاوز ارتفاع مرة أخرى إلى السيارات للأوبرا، وموزيلا MSIE7 وفي وقت لاحق. IE6، والذي لا يعتمد محددات atribute، يتجاهل ذلك.

عرض تجريبي للالإختراق مين ارتفاع عن IE6