تعليق: يقدم هذا المقال بشكل أساسي الحل لكيفية توافق عناصر HTML5 الجديدة مع المتصفحات القديمة. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
سؤال واحد ، ما الذي ألقاه المعلم لنا هو: كيف تجعل IE8 متوافقة مع هذه العلامات؟ (يتطلب تصميم DOM في JS)على الرغم من أنني تحدثت للتو عن اليوم ، إلا أنني ما زلت بحاجة إلى فهمه.
<span> <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> قارن توافق عناصر HTML5 الجديدة في المتصفحات القديمة - HTML5 Freedom </title>
</head>
<body>
<Header> المنطقة العلوية </header>
<v> منطقة الملاحة </nav>
<article> منطقة المقالة </article>
<TOTER> المساحة السفلية </تداول>
</body>
</html> </span>
في المتصفحات التي تدعم علامات HTML5 ، يبدو أنها:
عند
| أعلى المنطقة |
| منطقة التنقل |
| منطقة المادة |
| |
| -------------------------------------------------------------------------------------------------------------------------------
نمط العرض في المتصفح القديم هو:
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
كلها لها نفس التأثير. إذا لم تكن مخطئًا ، فإن المتصفح القديم لا يتعرف على هذه العلامات المضافة حديثًا ، لذلك يتم حلها جميعًا باستخدام العناصر الموجودة في الخط. لذلك ، هناك اختراق في الحل لجعله عنصرًا كتلة ولن يكون في نفس الخط. وبهذه الطريقة ، يمكن عرض نفس التأثير في كل من المتصفحات الجديدة والقديمة. بالإضافة إلى ذلك ، يتعرف المتصفح على العلامة. الحل المحدد للحاجة إلى إضافة علامات جديدة هو:
يدعم IE8/IE7/IE6 العلامات التي تم إنشاؤها من خلال المستند. يمكن استخدام هذه الميزة لتمكين هذه المتصفحات لدعم علامات HTML5 الجديدة. الرمز كما يلي:
document.createElement ('New Tag') ؛ // أضف لإنشاء علامة جديدة
رمز JS كما يلي:
<script>
document.createElement ('header') ؛
document.CreateElement ('nav') ؛
document.createElement ('article') ؛
document.CreateElement ('footer') ؛
</script>
أو إنشاء علامات مباشرة عن طريق الحلقات:
var e = "abbr ، article ، جانبا ، صوت ، قماش ، datalist ، التفاصيل ، مربع الحوار ، eventsource ، الشكل ، تذييل ، رأس ، hgroup ، علامة ، القائمة ، العداد ، nav ، الإخراج ، التقدم ، الوقت ، الفيديو ، الفيديو" .split ('،') ؛
var i = e.length ؛
بينما (أنا-) {
document.createElement (e [i])
}
نمط CSS إعداد النمط الافتراضي:
<style>
مقال ، جانبا ، قماش ، التفاصيل ، الشكل ، الشكل ، تذييل ، رأس ، hgroup ، القائمة ، NAV ، القسم ، ملخص {
العرض: كتلة ؛
}
</style>
طريقة أخرى هي استخدام طريقة الإطار ، باستخدام التعليقات الشرطية ورمز JS لتنفيذها
<span> <!-[إذا lt ie 9]>
<cript> src = "http://html5shim.googlecode.com/svn/trunk/html5.js" </script>
<! [endif]-> </span>
فقط أضف هذا الرمز لتحقيق مشكلات التوافق ، فيما يتعلق بالاهتمام الشرطي
<!-إذا lt ie9>
هو تحديد ما إذا كان أقل من IE9 أو أدناه. إذا كان الأمر ، قم بتنفيذ رمز JS هذا. إذا لم يكن الأمر كذلك ، فتجاهله. بالنسبة للرابط في JS ، يمكنك معرفة ذلك عن طريق فتحه مباشرة والتحقق منه. وهو أيضا قطعة كبيرة من التعليمات البرمجية.