Internet Explorer 9 tablo hücrelerini düzgün şekilde oluşturmuyor

Web sitem IE8, IE7, FF, Chrome ve Safari ile her zaman sorunsuz çalışıyor. Şimdi IE9'da test ediyorum ve tuhaf bir sorun yaşıyorum: bazı sayfalarda bazı tablo verileri yanlış işliyor.

HTML kaynağı doğrudur ve hepsi ve sorunu veren satır, sayfayı her yenilediğimde değişiyor (doğruyu söylemek gerekirse, sorunun kendisi yalnızca bir miktar yenilemede görünüyor, hepsinde değil).

IE'nin F12 Aracını kullanarak, tablo yapısı doğru görünür, M08000007448 içeren TD'den sonra boş TD olmamalıdır, ancak yine de bu şekilde işler.

Ayrıca, araç çubuğunda "tıklayarak eleman seç" aracıyla F12 aracını kullanırsam ve M08000007448 ile 19 arasındaki boş alana tıklamaya çalışırsam, "gizli td" yi değil TR'yi seçer.

Uygulamadaki başka bir tabloda da bu tablo oluşturma sorununu yaşıyorum, böyle bir şey yaşayan var mı? Yalnızca IE9'da olur :(

Önemli olup olmadığını bilmiyorum ama sayfa ASPNET (web formları) ile yapılmış ve Jquery ve diğer bazı JS eklentileri kullanılıyor.

Sayfayı (görüntülerle) kaydetmeye ve yerel olarak IE9 ile açmaya çalıştım, ancak sorun hiç olmadı. (Elbette tüm tablo yapısını kontrol ettim ve sorun değil. Başlık ve tüm satırlarda aynı sayıda TD var, gerektiğinde doğru sayıda colspan ile).

Bende de tam olarak aynı sorun var. bu https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables okumak isteyebilirsiniz

Html'niz ajax'tan döndüyse, javascript kullanarak td arasındaki boşluğu kaldırabilir, ardından yanıttan ile değiştirirsiniz.

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

Jquery şablonlarını kullanarak bir tabloyu doldururken aynı sorunu yaşadım. <td>Yalnızca IE9'da daha büyük veri kümelerinde (300+) 'hayalet' kullanmaya devam ettim . Bunlar <td>, dış sütunları masamın sınırlarının dışına itecektir.

Bunu gerçekten aptalca bir şey yaparak düzelttim; <td>başlangıç ​​ve bitiş etiketleri arasındaki tüm boşlukları kaldırarak ve masamla ilgili HTML biçimlendirmesini sola yaslayarak. Temel olarak, hepinizin <td> </td>aynı satırda olmasını istiyorsunuz , boşluk yok.

Misal:

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

@Shanison verilen çözüm yalnızca kısmen yardımcı olur, ancak tead, th vb. Gibi tablo içerik modelinin parçası olabilecek diğer öğeler arasında boşluklar varsa sorun devam eder.

İşte Lider'im tarafından iş yerinde tasarlanan daha iyi bir normal ifade.

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

tüm tablo, başlık, colgroup, col, tbody, thead, tfoot, tr, td, th öğeleri kapsayan.

Not: jQuery.browser, jQuery 1.9'da kaldırılmıştır ve yalnızca jQuery.migrate eklentisi aracılığıyla kullanılabilir. Lütfen bunun yerine özellik algılamayı kullanmayı deneyin.

Beyaz alanı kaldırarak bu sorunu çözdüm:

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);

IE Blog, IE 9 işleme uyumsuzluğunu gidermeye yardımcı olmak için bugün Uyum Denetçisi komut dosyası adı verilen yeni bir araçtan bahsediyor. Sorununuzu gidermenize yardımcı olabilir.

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

Ben de o sorunu yaşıyordum.

Bu soruna neden olan td / th etiketlerindeki bu genişlik özelliği aklıma geldi.

Bunu değiştirildi ": XXpx genişliği" = tarzı ve sorun çözüldü :)

Ben de bu sorunla karşılaştım ve bunun, doğrudan <td>öğelerin içine metin koyarken olduğunu fark ettim . Standart olup olmadığından emin değilim, ancak herhangi bir metni <span>öğelere sardıktan sonra oluşturma sorunları ortadan kalktı.

Yani bunun yerine:

<td>gibberish</td>

Deneyin:

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

Oluşturma sırasında html tablonuzdaki istenmeyen hücreleri önlemek için çok kullanışlı bir komut dosyası bulundu .

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

Sayfa yüklendiğinde çağırmanız gereken bu javascript işlevi (yani, onload olayı)

Geç cevap, ama umarım bu konuda birine yardım edebilirim. IE9'da hata ayıklarken aynı sorunu yaşadım. Çözüm, HTML kodundaki tüm beyaz boşlukları kaldırmaktı. Onun yerine

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

yapmak zorundaydım

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

Bu sorunu çözmüş gibiydi!

Bu, IE9'daki çok ciddi bir hatadır. Benim durumumda sadece farklı td arasındaki beyaz boşlukları kaldırmak yeterli değildi, bu yüzden farklı tr arasındaki boşlukları da kaldırdım. Ve iyi çalışıyor.

Dinamik tablo oluştururken ie-9 ile benzer problem yaşadım.

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

render edildiğinde ...

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

bu ie = 10 krom safaride mükemmel çalışıyor ...

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

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

100pxyerine yazman gerekiyor 100.

İe9 ile aynı biçimlendirme sorununa sahip olmak ve ie11'de doğru biçimde biçimlendirdiği ancak yaklaşık 400 satır ve 9 sütunlu bir tablo oluşturmak 25-40 saniye süren yeni bir sorun. Aynı nedene sahiptir, tr veya td etiketlerinin içindeki boşluk.

Bir AJAX çağrısından kısmi bir görünümün oluşturulmasıyla oluşturulan bir tabloyu görüntülüyorum. Burada yayınlanan bir yöntemi kullanarak işlenen kısmi görünümden beyaz boşluğu kaldırarak sunucuda BFH yapmaya karar verdim: http://optimizeasp.net/remove-whitespace-from-html

Bu, içine kopyalanan çözümü:

    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();

    }

Ve burada, başka bir SO cevabından çalınan bir dizge olarak kısmi bir görünümü döndüren bir yöntem var:

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
        }
    }

Yaklaşık 400 satırlık bir tabloyu oluşturmak biraz zaman alıyor, ancak bir saniyeden az, ki bu benim amacım için yeterince iyi.

Bu sorunu bazen Knockout tarafından oluşturulan tablolarda yaşadım. Benim durumumda, burada bulunan jQuery çözümünü kullanarak düzelttim

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;
}

IE10'da KendoUI ızgarasında aynı sorunu yaşadım. Bu hack ile IE'yi eksik tablo hücrelerini yeniden oluşturmaya zorlayabildim:

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

Boş bir textNode eklemek, IE'nin tüm tabloyu yeniden oluşturmasını sağlar.