كيف يمكن استهداف IE7 وIE8 باستخدام CSS صالح؟

StackOverflow https://stackoverflow.com/questions/814219

سؤال

أريد استهداف IE7 وIE8 باستخدام CSS المتوافق مع W3C.في بعض الأحيان، لا يؤدي إصلاح CSS لإصدار واحد إلى إصلاح الإصدار الآخر.كيف يمكنني تحقيق ذلك؟

هل كانت مفيدة؟

المحلول

استهدف إصدارات IE بوضوح دون اختراقات باستخدام HTML وCSS

استخدم هذا الأسلوب إذا كنت لا تريد الاختراق في CSS الخاص بك.أضف فئة فريدة للمتصفح إلى ملف <html> العنصر حتى تتمكن من التحديد بناءً على المتصفح لاحقًا.

مثال

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

ثم في CSS الخاص بك، يمكنك الوصول بدقة شديدة إلى المتصفح المستهدف.

مثال

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

لمزيد من المعلومات تحقق من http://html5boilerplate.com/

استهداف إصدارات IE باستخدام CSS "Hacks"

وللتوضيح أكثر، إليك الاختراقات التي تتيح لك استهداف إصدارات IE.

استخدم "\9" لاستهداف IE8 والإصدارات الأقدم.
استخدم "*" لاستهداف IE7 وما دونه.
استخدم "_" لاستهداف IE6.

مثال:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

تحديث:الهدف IE10

لا يتعرف IE10 على العبارات الشرطية لذا يمكنك استخدام هذا لتطبيق فئة "ie10" على ملف <html> عنصر

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

نصائح أخرى

وأوصي تبحث في تصريحات مشروطة، وجعل ورقة منفصلة عن الكيانات المستقلة كنت تواجه مشاكل معه. 

 <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
 <![endif]-->

الجواب على سؤالك

هناك طريقة صالحة تمامًا لتحديد كافة المتصفحات ولكن IE8 والإصدارات الأقدم تستخدم :not() الطبقة الزائفة.نظرًا لأن إصدارات IE 8 وما دونها لا تدعم :not(), ، ويتم تجاهل المحددات التي تحتوي عليه.هذا يعني أنه يمكنك القيام بشيء مثل هذا:

p {color:red;}
p:not([ie8min]) {color:blue;}

لا يزال هذا CSS صالحًا تمامًا، ولكنه يتسبب في عرض أنماط مختلفة في IE8 والإصدارات الأقدم (وكذلك Opera<9.5 وSafari<3.2).

حيل أخرى

فيما يلي قائمة بجميع محددات متصفح CSS الصالحة تمامًا والتي يمكنني العثور عليها، يستثني بالنسبة للبعض الذي يبدو زائدًا عن الحاجة تمامًا، مثل تلك التي تختار نوعًا واحدًا فقط من المتصفحات القديمة (1, 2):

/******  First the hacks that target certain specific browsers  ******/
* html p                        {color:red;} /* IE 6- */
*+html p                        {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    p                           {color:red;}
}                                            /* Chrome, Safari 3+ */
p, body:-moz-any-link           {color:red;} /* Firefox 1+ */
:-webkit-any(html) p            {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p               {color:red;} /* Firefox 4+ */

/****** And then the hacks that target all but certain browsers ******/
html> body p                  {color:green;} /* not: IE<7 */
head~body p                   {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p            {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p               {color:green;} /* not: IE<8 */
body:first-of-type p          {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p                       {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p      {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

الاعتمادات والمصادر:

للحصول على قائمة أكثر اكتمالا اعتبارا من عام 2015:

اي 6

* html .ie6 {property:value;}

أو

.ie6 { _property:value;}

اي 7

*+html .ie7 {property:value;}

أو

*:first-child+html .ie7 {property:value;}

آي إي 6 و 7

@media screen\9 {
    .ie67 {property:value;}
}

أو

.ie67 { *property:value;}

أو

.ie67 { #property:value;}

آي إي 6 و 7 و 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

اي 8

html>/**/body .ie8 {property:value;}

أو

@media \0screen {
    .ie8 {property:value;}
}

وضع معايير IE 8 فقط

.ie8 { property /*\**/: value\9 }

آي إي 8،9 و10

@media screen\0 {
    .ie8910 {property:value;}
}

آي إي 9 فقط

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

آي إي 9 وما فوق

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

آي إي 9 و 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

آي إي 10 فقط

_:-ms-lang(x), .ie10 { property:value\9; }

آي إي 10 وما فوق

_:-ms-lang(x), .ie10up { property:value; }

أو

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (وما فوق..)

_:-ms-fullscreen, :root .ie11up { property:value; }

بدائل جافا سكريبت

موديرنيزر

يعمل Modernizr بسرعة عند تحميل الصفحة لاكتشاف الميزات؛ثم ينشئ كائن JavaScript مع النتائج ، ويضيف فئات إلى عنصر HTML

اختيار وكيل المستخدم

جافا سكريبت:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

يضيف (على سبيل المثال) ما يلي إلى html عنصر:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

السماح بمحددات CSS مستهدفة للغاية، على سبيل المثال:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

هامش

إذا أمكن، تجنب استهداف المتصفح.تحديد وإصلاح أي مشكلة (مشكلات) تحددها.يدعم تحسين تدريجي و تدهور رشيقة.مع أخذ ذلك في الاعتبار، فإن هذا سيناريو "العالم المثالي" لا يمكن الحصول عليه دائمًا في بيئة الإنتاج، على هذا النحو - يجب أن يساعد ما ورد أعلاه في توفير بعض الخيارات الجيدة.

الإسناد / القراءة الأساسية

وكذلك لم يكن لديك ما يدعو للقلق حقا كود IE7 لا تعمل في IE8 بسبب IE8 ديه وضع التوافق (ويمكن تقديم صفحات نفس IE7). ولكن إذا كنت لا تزال ترغب في استهداف إصدارات مختلفة من IE، الطريقة التي تم القيام به لبعض الوقت الآن هو إما استخدام <لأ href = "http://msdn.microsoft.com/en-us/library/ms537512(VS. 85) .ASPX "يختلط =" نوفولو noreferrer "> تعليقات مشروطة أو تبدأ حكم المغلق مع و* لاستهداف IE7 وما يلي . أو هل يمكن أن تدفع الانتباه إلى وكيل المستخدم على الخوادم وطبق يصل ملف CSS مختلفة بناء على هذه المعلومات.

والمشكلة الفعلية ليست IE8، ولكن الخارقة التي تستخدمها للإصدارات السابقة من IE.

وIE8 جميلة قريبة لتكون متوافقة المعايير، لذلك يجب أن لا تحتاج إلى أي الخارقة على الإطلاق لذلك، ربما فقط بعض القرص. والمشكلة هي إذا كنت تستخدم بعض الخارقة للIE6 و IE7. سيكون لديك للتأكد من أنها لا تنطبق إلا على هذه الإصدارات وليس IE8.

ولقد تقدمت في موقع الشركة متوافقة مع IE8 منذ فترة. الشيء الوحيد الذي أنا تغيرت فعلا تم إضافة علامة التعريف الذي يقول IE أن الصفحات هي متوافقة مع IE8 ...

لقد فعلت ذلك باستخدام جافا سكريبت.أقوم بإضافة ثلاث فئات CSS إلى عنصر html:

ie<version>
lte-ie<version>
lt-ie<version + 1>

ويضيف أنه بالنسبة لـ IE7 ie7, lte-ie7 ..., lt-ie8 ...

هنا هو رمز جافا سكريبت:

(function () {
    function getIEVersion() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        } else if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        } else {
            return NaN;
        }
    };

    var ieVersion = getIEVersion();

    if (!isNaN(ieVersion)) { // if it is IE
        var minVersion = 6;
        var maxVersion = 13; // adjust this appropriately

        if (ieVersion >= minVersion && ieVersion <= maxVersion) {
            var htmlElem = document.getElementsByTagName('html').item(0);

            var addHtmlClass = function (className) { // define function to add class to 'html' element
                htmlElem.className += ' ' + className;
            };

            addHtmlClass('ie' + ieVersion); // add current version
            addHtmlClass('lte-ie' + ieVersion);

            if (ieVersion < maxVersion) {
                for (var i = ieVersion + 1; i <= maxVersion; ++i) {
                    addHtmlClass('lte-ie' + i);
                    addHtmlClass('lt-ie' + i);
                }
            }
        }
    }
})();

بعد ذلك، يمكنك استخدام .ie<version> فئة CSS في ورقة الأنماط الخاصة بك كما هو موضح بواسطة potench.

(استخدمت وظيفة الكشف عن ماريو في تحقق مما إذا كان المستخدم يستخدم IE مع jQuery)

تتمثل فائدة وجود lte-ie8 وlt-ie8 وما إلى ذلك في أنه يمكنك استهداف كل المتصفحات الأقل من أو المساوية لـ IE9، أي IE7 - IE9.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top