Internet Explorer 9 तालिका कक्षों को ठीक से प्रस्तुत नहीं कर रहा है

Question

मेरी वेबसाइट हमेशा IE8, IE7, FF, Chrome और Safari के साथ सुचारू रूप से चलती है। अब मैं IE9 पर इसका परीक्षण कर रहा हूं और मुझे एक अजीब समस्या का सामना करना पड़ रहा है: कुछ पृष्ठों में, कुछ सारणीबद्ध डेटा गलत तरीके से प्रस्तुत करता है।

HTML स्रोत सही है और सभी है, और पृष्ठ को ताज़ा करने पर हर बार समस्या को बदलने वाली पंक्ति बदल जाती है (सत्य बताने के लिए, समस्या स्वयं कुछ ताज़ा में ही प्रकट होती है, सभी में नहीं)।

IE के F12 टूल का उपयोग करते हुए, तालिका संरचना सही प्रतीत होती है, टीडी के बाद M08000007448 युक्त कोई खाली टीडी नहीं होना चाहिए, लेकिन फिर भी यह इस तरह से प्रस्तुत करता है।

इसके अलावा, अगर मैं टूलबार में "चुनिंदा तत्व क्लिक" टूल के साथ F12 टूल का उपयोग करता हूं, और मैं M08000007448 और 19 के बीच की खाली जगह पर क्लिक करने की कोशिश करता हूं, तो यह TR को चुनता है, न कि "हिडन td" को।

मैं आवेदन में किसी अन्य तालिका में भी इस तालिका प्रतिपादन समस्या हो रही है, किसी को इस तरह से कुछ अनुभव? यह केवल IE9 में होता है :(

मुझे नहीं पता कि यह महत्वपूर्ण है, लेकिन पेज ASPNET (वेबफॉर्म) के साथ बनाया गया है और Jquery और कुछ अन्य JS प्लगइन का उपयोग करता है।

मैंने पृष्ठ को (चित्रों के साथ) सहेजने और इसे IE9 के साथ स्थानीय में खोलने की कोशिश की, लेकिन समस्या कभी नहीं होती है। (बेशक मैंने सभी तालिका संरचना की जांच की और यह ठीक है। हेडर और सभी पंक्तियों में टीडीएस की समान संख्या होती है, जब आवश्यक हो तो कोलस्पैन की सही संख्या के साथ)।

Comments

कोई कोड? हो सकता है कि आपके पास कहीं बेमेल टैग हो?

— नत्फ़ली उर्फ ​​नील

क्या आप IE9 F12 टूल का उपयोग करके HTML को मान्य कर सकते हैं? क्या IE9 आपको बताता है कि वह किस मोड में प्रतिपादन कर रहा है? क्विरक्स मोड, IE 7, IE 8, IE 9 मानक (डिफ़ॉल्ट), आदि ...

— Dan Sorensen

IE ब्लॉग में IE 9 असंगतता का निवारण करने में मदद करने के लिए आज एक नए टूल का उल्लेख किया गया है: blogs.msdn.com/b/ie/archive/2011/04/27/…

— Dan Sorensen

कोड वास्तव में लंबा है, मुझे नहीं लगता कि समस्या है। F12 टूल के साथ कोई त्रुटि नहीं मिली, और रेंडरिंग मोड IE9 है। मैं इंस्पेक्टर इंस्पेक्टर की कोशिश करता हूं और आपको बता देता हूं;) मैंने टैग मिस्टचेस के लिए भी जांच की (पहली बात मैंने की) लेकिन कोई किस्मत नहीं

— fgpx78

BTW, मुझे समस्या मिली: ऐसा लगता है कि HEAD टैग से पहले कुछ जावास्क्रिप्ट कोड समस्या पैदा कर रहा था। IE9 इसे अच्छी तरह से संभालने के लिए प्रतीत नहीं होता है, ... यह एक समस्या है क्योंकि मैंने एक एमवीसी समस्या को धीमा कर दिया है ताकि मैं वापस पुराने पर जाऊं :) आप सभी का धन्यवाद।

— fgpx78

Answer 1

मेरी भी बिल्कुल यही समस्या है। आप इसे https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables पर पढ़ना चाह सकते हैं

यदि आप जावास्क्रिप्ट द्वारा अपने html को अजाक्स से लौटाया जाता है, तो प्रतिक्रिया से, आप इसे बदल सकते हैं

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

Comments

इस समाधान ने मेरी समस्या को ठीक कर दिया। इससे पहले कि मैं इस समाधान को पाया मुझे एक पहेली को शांत कर दिया।

— बेयरवुल्फ

यह लिंक अब नहीं उपलब्ध है।

— मेसन २४०

यह अभी भी उपलब्ध है। YOu को सामग्री देखने के लिए लॉगिन करना होगा। मैंने सिर्फ एक स्क्रीनशॉट लिया। आप मेरे जवाब में स्क्रीनशॉट पा सकते हैं

— शॉनसन

मैंने भी जोड़ा & nbsp; खाली कोशिकाओं के लिए।

— बाकुदन

क्या हुआ अगर आप अजाक्स से नहीं लौट रहे हैं, बल्कि एक आंशिक दृश्य के माध्यम से

— leora

Answer 2

मेरे पास एक ही सटीक मुद्दा था जिसमें jquery टेम्प्लेट का उपयोग करके तालिका को पॉप्युलेट करना था। मैं <td>केवल IE9 में बड़े डेटासेट (300+) पर 'भूत' का होना जारी रखा । ये <td>मेरी तालिका की सीमाओं के बाहर बाहरी स्तंभों को धक्का देंगे।

मैंने वास्तव में मूर्खतापूर्ण कुछ करके यह तय किया; सभी रिक्त स्थान को हटाकर <td>प्रारंभ और अंत टैग को धोखा दिया और मेरी तालिका से संबंधित HTML मार्कअप को सही ठहराया। मूल रूप से, आप अपने सभी <td> </td>को एक ही पंक्ति में चाहते हैं, कोई रिक्त स्थान नहीं।

उदाहरण:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

Comments

धन्यवाद, अगर समस्या फिर से आ जाती है तो मैं इसकी कोशिश करूँगा। मुझे यह जानकर खुशी हुई कि मैं ऐसा करने वाला अकेला नहीं हूँ;)

— fgpx78

क्या? (यह मेरी पहली प्रतिक्रिया थी)। लेकिन यह काम किया! आपको बहुत - बहुत धन्यवाद!

— फिलिपा लेदरडा

मेरे लिए काम किया बहुत बहुत धन्यवाद! आपके लिए +1

— सौरभ बयानी

तुम सर, तुम कमाल हो! :-)

— सत्या

इस के लिए बहुत बहुत धन्यवाद! <Td> प्रारंभ और अंत टैग के बीच के सभी रिक्त स्थान को हटाकर वास्तव में काम किया।

— फ्रेंकी लोसावियो

Answer 3

@ शनीसन का समाधान केवल आंशिक रूप से मदद करता है, लेकिन समस्या बनी रहती है अगर किसी भी अन्य तत्वों के बीच रिक्त स्थान है जो तालिका सामग्री मॉडल जैसे कि थ्रेड, वें आदि का हिस्सा हो सकता है।

यहाँ काम पर मेरे लीड द्वारा तैयार एक बेहतर रेगेक्स है।

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

सभी तालिका, कैप्शन, कॉलग्रुप, कॉल, tbody, thead, tfoot, tr, td, th तत्वों को कवर करना।

नोट: jQuery.browser को jQuery 1.9 में हटा दिया गया था और यह केवल jQuery.migrate प्लगइन के माध्यम से उपलब्ध है। कृपया इसके बजाय सुविधा पहचान का उपयोग करने का प्रयास करें।

Answer 4

मैंने व्हाट्सएप को हटाकर इस मुद्दे को ठीक किया:

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);

Answer 5

IE ब्लॉग ने एक नए टूल का उल्लेख किया है जिसे IE 9 असंगति का प्रतिपादन करने में समस्या निवारण में मदद करने के लिए सुसंगत निरीक्षक स्क्रिप्ट कहा जाता है। यह आपके समस्या के निवारण में मदद कर सकता है।

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Comments

उपकरण के साथ कुछ भी नहीं मिला। बस aspnet इंजन रेंडरिंग (कुछ मेटा और हेडर में लिंक टैग के लिए लापता) के कारण सभी को बहुत अधिक समस्या हो रही है।

— fgpx78

Answer 6

मुझे वह समस्या भी हो रही थी।

यह मेरे लिए है, कि td / th टैग में चौड़ाई विशेषता इस समस्या का कारण है।

इसे शैली में बदल दिया = "चौड़ाई: XXpx" और समस्या हल हो गई है :)

Answer 7

मैं इस समस्या में भी भाग गया और मुझे एहसास हुआ कि यह तब हुआ जब मैं सीधे <td>तत्वों में पाठ डाल रहा था । मुझे यकीन नहीं है कि यह एक मानक है या नहीं, लेकिन <span>तत्वों में किसी भी पाठ को लपेटने के बाद , प्रतिपादन मुद्दे गायब हो गए।

इसलिए इसके बजाय:

<td>gibberish</td>

प्रयत्न:

<td><span>gibberish</span></td>

Comments

मुझे यह समाधान पसंद है। यह सभी तत्वों के बीच से सफ़ेद-स्थान को अलग करने की तुलना में अधिक सीधा है। इसके अलावा, इसने मेरे लिए काम किया :-)

— आर। श्रेयर्स

Answer 8

रेंडर करते समय अपने html टेबल में अवांछित कोशिकाओं को रोकने के लिए एक बहुत ही उपयोगी स्क्रिप्ट मिली ।

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

यह जावास्क्रिप्ट फ़ंक्शन आपको तब लोड करना चाहिए जब पृष्ठ लोड हो जाए (यानी ऑनलोड घटना)

Answer 9

देर से जवाब, लेकिन उम्मीद है कि मैं इसके साथ किसी की मदद कर सकता हूं। IE9 में डिबगिंग करते समय मैंने एक ही समस्या का अनुभव किया। समाधान HTML कोड में सभी व्हाट्सएप को हटा रहा था। के बजाय

<tr> <td>...</td> <td>...</td> </tr>

मुझे करना था

<tr><td>...</td><td>...</td></tr>

यह समस्या को हल करने के लिए लग रहा था!

Answer 10

यह IE9 में बहुत गंभीर बग है। मेरे मामले में अलग-अलग td के बीच केवल सफेद रिक्त स्थान को हटाना पर्याप्त नहीं था, इसलिए मैंने अलग-अलग tr के बीच के रिक्त स्थान भी हटा दिए हैं। और यह ठीक काम कर रहा है।

Answer 11

डायनेमिक टेबल के प्रतिपादन के समय मुझे भी ऐसी ही समस्या थी।

var table = $('<table><tr><td style="width :100"></td></tr></table>');

जब अनुवाद किया गया ...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

यह पूरी तरह से ठीक है = 10 क्रोम सफारी में काम करता है ...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

आप लिखने की ज़रूरत 100pxके बजाय 100।

Answer 12

Ie9 के साथ एक ही स्वरूपण समस्या है, और ie11 में एक नया मुद्दा है जहाँ यह सही ढंग से प्रारूपित करता है लेकिन लगभग 400 पंक्तियों और 9 स्तंभों की एक तालिका को प्रस्तुत करने में 25-40 सेकंड लगते हैं। इसका एक ही कारण है, tr या td टैग के अंदर व्हाट्सएप।

मैं एक तालिका प्रदर्शित कर रहा हूं जो एक AJAX कॉल से आंशिक दृश्य के प्रतिपादन द्वारा बनाई गई है। मैंने सर्वर पर व्हाट्सएप को प्रदान किए गए आंशिक दृश्य से व्हाट्सएप को हटाने का फैसला किया, यहां पोस्ट की गई विधि का उपयोग करके: http://optimizeasp.net/remove-whitespace-from-html

यह उसका समाधान है जिसे टोटो में कॉपी किया गया है:

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

और यहाँ एक विधि है जो एक स्ट्रिंग के रूप में एक आंशिक दृश्य लौटाती है, दूसरे SO उत्तर से चुरा ली जाती है:

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

इसमें थोड़ा समय लगता है, लेकिन लगभग 400 पंक्तियों की एक तालिका को प्रस्तुत करने के लिए एक सेकंड से भी कम समय, जो मेरे उद्देश्यों के लिए पर्याप्त है।

Answer 13

मुझे यह समस्या कभी-कभी नॉकआउट द्वारा उत्पन्न तालिकाओं पर होती थी। मेरे मामले में मैंने इसे यहां पाए गए jQuery समाधान का उपयोग करके तय किया

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

Answer 14

मैं IE10 में KendoUI ग्रिड के साथ एक ही मुद्दा था। मैं IE को इस हैक के साथ लापता तालिका कोशिकाओं को पुन: प्रस्तुत करने के लिए मजबूर करने में सक्षम था:

htmlTableElement.appendChild(document.createTextNode(''));

एक खाली textNode को लागू करने से IE पूरी तालिका को पुन: प्रस्तुत करता है।