قد قرأت هذا في بعض بلوق ... اعتقد انه كان لطيف لفهرسة هذا المرجع للمستقبل .... ويمكن أيضا أن تكون مسألة مقابلة الهامة التي كنت طلبت في يوم من الأيام ....
كتابة قصاصة من CSS التي سيتم عرض فقرة في الزرقاء في المتصفحات القديمة، والأحمر في أحدث المتصفحات، والأخضر والأسود في IE6 في IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
CSS لغير IE المتصفحات: ه أي أخبار للمطورين المغلق الذي، المختارون الطفل المغلق كما في المثال أدناه، لا يبدو للعمل في شركة آي إي.
على سبيل المثال div> المصدر: تمتد {بعض} المغلق، وهذا يعني "عندما عنصرا فترة هو طفل (وليس الحفيد أو طفل كبير كبير وما إلى ذلك) من عنصر تقسيم".
لكن استخدمنا هذا CON لصالحنا. تاريخيا، وقد استخدم محدد طفل لإخفاء أوامر CSS من IE. ببساطة عن طريق وضع html>body وأمام أي آي إي أمر CSS تجاهلها:
html>body .foo { CSS commands go here ;}
يعمل هذا لأن <body> دائما طفل من <html> - أنه يمكن بالطبع لن يكون الحفيد أو حفيد كبير، من <html> .
الآن أن IE 7 يفهم محدد طفل، لديك لإدراج علامة تعليق فارغة في مباشرة بعد علامة أكبر من IE 7 وبعد ذلك لا يفهم هذا محدد (من يدري لماذا؟)، وبالتالي تجاهل تماما هذا الأمر CSS.:
html> /**/ body .foo { CSS commands go here ;}
إذا لم تكن قد شهدت بالفعل هذه من قبل، ويكون للقراءة من خلال ما يلي أيضا
كما جرت العادة، واحدة من بعض المشاكل الكثيرة غريب مع شركة آي إي، وهذا واحد لا بد صفوف في العلوية 10 من المراوغات IE.
بيان المشكلة (وهذا كان مشكلة لي، ربما لديك misbehaviors مشابهة):
لدي كثير من DIV في الصفحة مع فئة "sectionhead"، التي ليست سوى عنوان المقطع على الصفحة. لذلك لدي بعض نمط يبحث مثل هذا
. sectionhead {حجم الخط: 18px؛ خلفية: # cfcfcf؛ الحشو: 5PX؛}
وDIV هو شريط رمادي فاتح مع بعض النص الأسود. ما يحدث في IE هو يتم عرض بعض من هذه الرؤوس قسم موافق، ولكن بعضها غير مرئي، وحتى، التمرير الصفحة، أو انقر شيء على الصفحة وما إلى ذلك في وقت ما أنها تميل إلى أن تختفي عند النقر على "بديل" المفتاح عند أسفل الصفحة أو التمرير مع شريط التمرير. ويبدو انهم في بعض الأحيان، ليعاود الظهور عند تحميل (F5) في الصفحة. أنا قصير 1 DIV بسيط تماما مع بعض أسلوب بسيط يتصرف الكريهة.
ما الذي يمكن أن يسبب مثل هذا سلوك خاطئ؟ حسنا! بصراحة، ليس لدي أي فكرة!
ممكن الحل:
مرة أخرى لا تسألني لماذا، ولكن في كثير من الحالات هذه المشكلة يميل إلى أن تختفي عند إضافة موقف: نسبة إلى سوء تصرف عناصر النمط، مثل هذا
. sectionhead {حجم الخط: 18px؛ خلفية: # cfcfcf؛ الحشو: 5PX؛ الموقف: النسبية}
غريب ولكن ماذا أقول؟ بارك الله لي من شركة آي إي!
وتفعل مشاركتها مع الولايات المتحدة، إذا كان لديك مشاكل مشابهة.
إذا كان لديك من أي وقت مضى (أو إجراء واحد) إلى قائمة عمودي باستخدام عناصر قائمة (لي) به والمغلق، فقد تواجه، بعد هذه علة أخرى في 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] ->
إضافة 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
في مناسبات عدة، في حين تقوم تخطيطات الصفحات مع الانقسامات المنبثقة / lightboxes / نصائح الخ ونحن يأتي عبر الحالات التي يكون فيها بعض الكائنات نموذج SELECT يحدث أن تكون في إطار هذه الانقسامات POPUP، حسب التصميم وهذا يظهر من خلال .... يوك!
حسنا! هل يمكن بسهولة تحديد هذا عن طريق تعديل الخاص Z-INDEX القيم بشكل ملائم لFF و IE7. لكن جيد قديم (يقصد التورية) IE6 لا تتصرف على النحو المنشود .... وتظهر من خلال BOX SELECT، حتى بعد تطبيق بعض ارتفاع كبير Z-INDEX القيم إلى قسم الخاص قافزة ...! المشكله!
لا توجد حلول لهذه المشكلة، ولكن هناك، في اعتقادي، أكثر من وسيلة قليلة لعمل حول هذه المشكلة، ولكن هنا ايم ان اقول لكم أبسط الحلول التي استخدمها، والذي يعمل بشكل جيد بالنسبة لي، في معظم الحالات ....
"إخفاء مربع SELECT ROUGE عند إظهار POPUP"
ببساطة قصاصة في السيناريو الخاص بك حيث كنت تظهر المنبثقة الخاص، إضافة إلى قطعة من سيناريو لتحديد الرؤية للصندوق SELECT إلى "المخفية"
document.getElementById ('my_select') style.visibilty = "الخفية".
وتذكر باعادته الى الوراء في ختام القسم الخاص قافزة
. document.getElementById ('my_select') style.visibilty = "مرئي"؛
حيث "my_select" هو معرف من صندوق تهيج SELECT
ويساعد هذا الأمل ...
PS. هناك خيارات أخرى مثل فكورسي positionining حيوي IFRAME (بنفس الحجم كما كنت قافزة) تحت DIV قافزة ... وهذا يعمل بشكل جيد جدا، ولكن مع إضافة الكثير من عناصر DOM، ومخطوطات، وصداع. ولقد استخدم هذا الحل أيضا، وإذا كنت لا تحتاج الى أي مساعدة مع هذا الخيار، لا اسمحوا لي أن أعرف. سوف نكون سعداء للمساعدة!
قبل ذلك ببضعة أشهر رأينا، كيف يمكن ان تشمل قطعة من CSS التي من شأنها أن تكون مرئية على IE6 فقط ( للحصول على الكيانات المستقلة الخاصة بك فقط ). هناك طرق أخرى لتحقيق ذلك أيضا. وتشمل مجرد CSS منفصلة، ومحددة لIE التي تستهدفها. ويمكن تحقيق هذا مع ما يسمى والتعليقات شرطي.
التعليقات مشروط هو وسيلة للكشف عن نوع المتصفح والإصدار. يتم تنفيذ الكشف عن متصفح للتأكد من أن المحتوى المقدم للمتصفح معين. ويمكن أن يتم الكشف عن متصفح باستخدام تقنيات عديدة ومختلفة. هذا الأسلوب له ميزات عديدة عبر الأساليب السابقة، التي تضمنت تبديل نمط باستخدام جافا سكريبت. إلى قائمة هامة قليلة، سيكون؛
كيف نفعل ذلك؟
نفعل شيئا في Internet Explorer 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:
حول تعليق شرطي
إذا كنت قد تعرضت لكتابة CSS لبعض الوقت، سيكون لديك خبرة تلك الأوقات عند سحب حرفيا شعرك عندما الخاص بك تخطيطات المغلق نظر جيد في جميع المتصفحات الجديدة (أعني في وقت لاحق من متصفحات IE6)، ولكن IE 6 رميات نوبة غضب. أنت تناضل من الصعب ضبط المغلق الخاص بك ولكن لا تعمل ... حسنا! هذه محاولة الخارقة ...
1. تؤكد المأجور: -
بحكم التعريف، CSS 2.1 مواصفات يسمح السطر ("_") في معرفات CSS. لكن يبدو أن العديد من المتصفحات لا يزال لتجاهل أي يحدد شرع مع تسطير لكن آي إي. علة هذا آي إي / ميزة وهكذا يصبح وسيلة واضحة جدا لتعيين خصائص CSS لالكيانات المستقلة فقط. تذكر ذلك، خاصية CSS مكتوب مع التأكيد على البدء مرئيا لبرنامج Internet Explorer (كافة الإصدارات ولكن IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}مظاهرة ضوء هذا التأكيد الإختراق
أيضا، والإختراق مين ارتفاع لIE6 يستخدم الإختراق تأكيد، راجع
2. التجزئة (#) هاك: -
وشملت IE7 مثل تسطير المأجور، وهذا هو واحد أيضا هو للoly الكيانات المستقلة، مع وجود فرق جيدة، معرفات الملكية سبقت مع # في البداية غير واضحة بالنسبة لكافة الإصدارات آي إي، وغير مرئي للمتصفح أي معيار آخر.
.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*/
}
هؤلاء المأجورون يبدو السماء أرسلت، عندما يعمل أي شيء آخر ... وإذا كان أي من هؤلاء المأجورون ينقذ حياتك يوما ما لا، وننسى في التعامل معي على القهوة :)
وكان لي هذه المشكلة حيث، إذا كان لديك حالة تمرير الماوس على تقسيم (DIV)، والانقسام الذي، لسبب جيد يجب أن تكون شفافة (كما في حالتي، حيث كان مطلوبا لعرض بعض العلامات على صورة على تمرير الماوس من فشل IE هذا التقسيم شفاف)، لتحريك الحدث تمرير الماوس (عمل جيد في فايرفوكس).
وحاول العديد من الخيارات ... وكثير منها لم يكن سوى محاولة يائسة للحصول على هذا الحدث لاطلاق النار في شركة آي إي. واحدة من تلك معقول، التي اعتقدت كان قد عمل لتحديد لون الخلفية للشعبة ومجموعة من الابهام الى الصفر ... حسنا! الطعجه العمل!
وكان الحل النهائي الذي بدا في العمل، وعدم الإزعاج وظائف أنا اللازمة لوضع بكسل واحد يتكرر / صورة خلفية شفافة في تلك الشعبة
... سخيفة! ولكن الآن IE يبدو سعيدا.
بسيطة ... لتصحيح هذه المشكلة استخدام العرض: المضمنة.
div {float:left;margin:40px;display:inline;}
إذا كان لديك عنصر طرح مثل DIV وتقوم بوضع هامش اليمين أو اليسار على هامش هذا العنصر، وإنترنت إكسبلورر 6.0 ضعف القيمة التي الهامش، لخبطة تخطيط HTML / CSS. لإصلاح هذه مجرد اضافة العرض: مضمنة؛ إلى العنصر الخاص العائمة.
