العقد النصية ذات المسافات البيضاء غير المتناسقة في Internet Explorer

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

سؤال

ينبه كود المصدر التالي النتائج التالية:

إنترنت إكسبلورر 7: 29
فايرفوكس 3.0.3:37 (صحيح)
سفاري 3.0.4 (523.12.9): 38
جوجل كروم 0.3.154.9: 38

يرجى تجاهل الحقائق التالية:

  • تقوم متصفحات Webkit (Safari/Chrome) بإدراج عقدة نصية إضافية في نهاية علامة النص
  • لا يحتوي Internet Explorer على أسطر جديدة في عقد المسافات البيضاء الخاصة به، كما ينبغي.
  • لا يحتوي Internet Explorer على عقدة مسافة بيضاء للبداية (توجد مسافة بيضاء واضحة قبل العلامة <form>، ولكن لا توجد عقدة نصية لمطابقتها)

من بين العلامات الموجودة في صفحة الاختبار، لا تحتوي العلامات التالية على عقد نصية ذات مسافات بيضاء مدرجة في DOM بعدها: form, input[@radio], div, span, table, ul, a.

سؤالي هو: ما الذي يجعل هذه العقد هي الاستثناء في Internet Explorer؟ لماذا لا يتم إدراج مسافة بيضاء بعد هذه العقد ويتم إدراجها في العقد الأخرى؟

هذا السلوك هو نفسه إذا قمت بتبديل ترتيب العلامات، وقم بتبديل نوع المستند إلى XHTML (مع الاستمرار في الحفاظ على الوضع القياسي).

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

شكرا الإنترنت ، زاك

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
        function countNodes()
        {
            alert(document.getElementsByTagName('body')[0].childNodes.length);
        }
        </script>
    </head>
    <body onload="countNodes()">
        <form></form>
        <input type="submit"/>
        <input type="reset"/>
        <input type="button"/>
        <input type="text"/>
        <input type="password"/>
        <input type="file"/>
        <input type="hidden"/>
        <input type="checkbox"/>
        <input type="radio"/>
        <button></button>
        <select></select>
        <textarea></textarea>
        <div></div>
        <span></span>
        <table></table>
        <ul></ul>
        <a></a>
    </body>
</html>
هل كانت مفيدة؟

المحلول

يحاول IE أن يكون مفيدًا ويخفي العقد النصية التي تحتوي على مسافة بيضاء فقط.

في التالي:

<p>
<input>
</p>

مواصفات W3C DOM تقول ذلك <p> لديه 3 عقد فرعية (" "، <input> و" ")، سوف يتظاهر IE بوجود واحد فقط.

الحل هو التخطي العقد النصية في جميع المتصفحات:

var node = element.firstChild;
while(node && node.nodeType == 3) node = node.nextSibling;

تحتوي أطر عمل JS الشائعة على وظائف لمثل هذه الأشياء.

نصائح أخرى

حسنًا...أود أن أقول السبب في أنه IE.لا أعتقد أن المبرمجين كان لديهم نية محددة للقيام بذلك بهذه الطريقة.

أظن أن طاولة العلامة مختلفة بين المتصفحات.

على سبيل المثالما العقد التي يحتوي عليها الجدول الافتراضي تلقائيًا بطريقة سحرية؟

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
  </tfoot>
</table>

لماذا لا تحاول فقط التنقل في DOM ومعرفة ما يعتقد كل متصفح أن المستند يحتوي عليه؟

يقوم IE بالكثير من "التحسين" لـ DOM.للحصول على انطباع عما قد يبدو عليه هذا، "تحديد الكل"، "نسخ" في IE، ثم "لصق بديل" في Visual Studio، تحصل على ما يلي:

<INPUT value="Submit Query" type=submit> 
<INPUT value=Reset type=reset> 
<INPUT type=button> 
<INPUT type=text> 
<INPUT value="" type=password> 
<INPUT type=file> 
<INPUT type=hidden>
<INPUT type=checkbox>
<INPUT type=radio>
<BUTTON type=submit></BUTTON> 
<SELECT></SELECT>
<TEXTAREA></TEXTAREA>

لذا فهو يزيل بعض العلامات الفارغة ويضيف بعض السمات الافتراضية.

زخليط، أعتقد أنني وجدت حلاً للمشكلة.(لقد حصلت على الحرية في نقل عناصر النموذج إلى علامة النموذج.)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--REF http://stackoverflow.com/questions/281443/inconsistent-whitespace-text-nodes-in-internet-explorer -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function countNodes()
    { alert(document.getElementsByTagName('form')[0].childNodes.length);
    };
</script>
</head>
<body onload="countNodes()">
  <form
    ><input type="submit"/
    ><input type="reset"/
    ><input type="button"/
    ><input type="text"/
    ><input type="password"/
    ><input type="file"/
    ><input type="hidden"/
    ><input type="checkbox"/
    ><input type="radio"/
    ><button></button
    ><select></select
    ><textarea></textarea
    ><div></div
    ><span></span
    ><table></table
    ><ul></ul
    ><a></a
  ></form>
</body>
</html>

كما ترون، لقد قمت بتقسيم وربط قوسي الإغلاق gt (أكبر من) بحيث يلتصقان بالعلامة التالية، وبالتالي ضمان عدم وجود مسافات بيضاء غامضة.

لقد كانت مفاجأة جميلة أنها نجحت مع جميع متصفحات سطح المكتب (الأربعة) التي تم تجربتها حتى الآن، وجميعها أبلغت عن نفس العدد من عقد DOM.

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