O Internet Explorer 9 não renderiza as células da tabela corretamente

115

Meu site sempre funcionou perfeitamente com IE8, IE7, FF, Chrome e Safari. Agora estou testando no IE9 e estou tendo um problema estranho: em algumas páginas, alguns dados tabulares são renderizados incorretamente.

O código-fonte HTML está correto e tudo, e a linha que dá o problema muda toda vez que eu atualizo a página (para falar a verdade, o problema em si só aparece em alguma atualização, não em tudo).

Usando a ferramenta F12 do IE, a estrutura da tabela parece correta, não deve haver nenhum TD vazio após o TD contendo M08000007448, mas ainda assim é processado.

Além disso, se eu usar a ferramenta F12, com a ferramenta "selecionar elemento por clique" na barra de ferramentas, e tento clicar no espaço vazio entre M08000007448 e 19, ela seleciona o TR, não um "td oculto".

Estou tendo esse problema de renderização de tabela também em alguma outra tabela do aplicativo, alguém está passando por algo assim? Acontece apenas no IE9 :(

Não sei se é importante, mas a página é feita com ASPNET (webforms) e usa Jquery e algum outro plugin JS.

Tentei salvar a página (com imagens) e abri-la no local com o IE9, mas o problema nunca ocorre. (Claro que verifiquei toda a estrutura da tabela e está tudo bem. Cabeçalho e todas as linhas têm cada vez o mesmo número de TD's, com o número certo de colspan quando necessário).

fgpx78
fonte
algum código? talvez você tenha uma tag incompatível em algum lugar?
Naftali, também conhecido como Neal,
Você consegue validar o HTML usando as ferramentas IE9 F12? O IE9 informa em que modo está sendo renderizado? Quirks Mode, IE 7, IE 8, IE 9 Standards (padrão), etc ...
Dan Sorensen
O Blog do IE menciona uma nova ferramenta hoje para ajudar a solucionar problemas de incompatibilidade do IE 9: blogs.msdn.com/b/ie/archive/2011/04/27/…
Dan Sorensen
O código é muito longo, não acho que o problema esteja aí. Nenhum erro encontrado com a ferramenta F12 e o modo de renderização é o IE9. Eu tento o inspetor do Compat e digo a você;) Eu verifiquei também os mapas mistos de tags (a primeira coisa que fiz), mas sem sorte
fgpx78
BTW, encontrei o problema: parece que algum código javascript antes da tag HEAD estava causando o problema. O IE9 não parece lidar bem com isso ... é um problema, pois resolvi um problema de MVC fazendo isso ... Estou de volta ao antigo :) Obrigado a todos.
fgpx78

Respostas:

72

insira a descrição da imagem aquiEu também tenho exatamente o mesmo problema. você pode querer ler isto https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Você pode remover o espaço entre td usando javascript se seu html for retornado de ajax, a partir da resposta, você o substitui por

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);
Shanison
fonte
Esta solução resolveu meu problema. Isso me deu um quebra-cabeça silencioso antes de encontrar essa solução.
Bearwulf
O link não está mais disponível.
Mason240 de
Ainda está disponível. Você deve fazer o login para ver o conteúdo. Acabei de tirar uma captura de tela. Você pode encontrar a captura de tela na minha resposta
Shanison
Também adicionei & nbsp; para as células vazias.
Bakudan
e se você não estiver voltando do ajax, mas através de uma visão parcial
leora
33

Eu tive exatamente o mesmo problema ao preencher uma tabela usando modelos jquery. Continuei tendo 'fantasmas' <td>em conjuntos de dados maiores (mais de 300) apenas no IE9. Isso <td>empurraria as colunas externas para fora dos limites da minha mesa.

Eu consertei isso fazendo algo realmente bobo; removendo todos os espaços entre as <td>tags de início e fim e justificando à esquerda a marcação HTML pertencente à minha tabela. Basicamente, você quer tudo <td> </td>na mesma linha, sem espaços.

Exemplo:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>
Jorge
fonte
Obrigado, tentarei se o problema ocorrer novamente. Fico feliz em saber que não sou o único com isso;)
fgpx78
4
que? (esta foi minha primeira reação). Mas funcionou! Muito obrigado!
Filipa Lacerda de
1
Funcionou para mim Muito obrigado! +1 para você
Saurabh Bayani
Você senhor, você é incrível! :-)
Satya,
Muito obrigado por isso! Remover todos os espaços entre as tags de início e fim <td> funcionou de fato.
Frankie Loscavio
14

A solução dada a @Shanison ajuda apenas parcialmente, mas o problema persiste se houver espaços entre qualquer um dos outros elementos que podem fazer parte do modelo de conteúdo da tabela como thead, th etc.

Aqui está um regex melhor desenvolvido pelo meu líder no trabalho.

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

cobrindo todos os elementos table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Nota: jQuery.browser foi removido no jQuery 1.9 e está disponível apenas por meio do plugin jQuery.migrate. Tente usar a detecção de recursos.

Ravi Kadaboina
fonte
11

Corrigi esse problema removendo o espaço em branco:

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);
Will Liska
fonte
2

O IE Blog menciona uma nova ferramenta hoje chamada de script Compat Inspector para ajudar a solucionar problemas de incompatibilidade de renderização do IE 9. Isso pode ajudar a solucionar seu problema.

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

Dan Sorensen
fonte
Não foi possível encontrar nada com a ferramenta. Apenas um monte de problemas de validação, tudo devido à renderização do motor aspnet (falta final / para alguma meta e tag de link no cabeçalho).
fgpx78
2

Eu também estava tendo esse problema.

Ocorreu-me que o atributo de largura nas tags td / th causando esse problema.

Alterado para style = "largura: XXpx" e o problema está resolvido :)

TAURI
fonte
2

Também me deparei com esse problema e percebi que isso acontecia quando eu estava colocando texto diretamente nos <td>elementos. Não tenho certeza se é um padrão ou não, mas depois de envolver qualquer texto em <span>elementos, os problemas de renderização desapareceram.

Então, em vez de:

<td>gibberish</td>

experimentar:

<td><span>gibberish</span></td>
user1207607
fonte
Eu gosto dessa solução. É mais simples do que retirar o espaço em branco de todos os elementos. Além disso, funcionou para mim :-)
R. Schreurs
2

Encontrou um script muito útil para evitar células indesejadas em sua tabela html durante a renderização.

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

Esta função javascript você deve chamar quando a página carregar (isto é, evento onload)

Rish
fonte
1

Resposta tardia, mas espero poder ajudar alguém com isso. Tive o mesmo problema ao depurar no IE9. A solução foi remover todos os espaços em branco no código HTML. Ao invés de

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

eu tive que fazer

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

Isso parecia resolver o problema!

Anneleenw
fonte
0

Este é o bug muito sério do IE9. No meu caso, remover apenas os espaços em branco entre os diferentes td não foi suficiente, portanto, removi os espaços entre os diferentes tr também. E está funcionando bem.

Vikas Pawar
fonte
0

Eu tive um problema semelhante com o ie-9 ao renderizar uma tabela dinâmica.

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

quando renderizado se traduz em ...

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

isso funciona perfeitamente bem no ie = 10 Chrome Safari ...

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

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

você precisa escrever em 100pxvez de 100.

Arun Pratap Singh
fonte
0

Tendo o mesmo problema de formatação com o ie9, e um novo problema com o ie11, onde formata corretamente, mas leva 25-40 segundos para renderizar uma tabela de cerca de 400 linhas e 9 colunas. Tem a mesma causa, espaço em branco dentro das tags tr ou td.

Estou exibindo uma tabela que é criada pela renderização de uma visão parcial de uma chamada AJAX. Decidi fazer o BFH no servidor removendo o espaço em branco da visualização parcial renderizada, usando um método postado aqui: http://optimizeasp.net/remove-whitespace-from-html

Esta é a sua solução copiada integralmente:

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

    }

E aqui está um método que retorna uma visão parcial como uma string, roubada de outra resposta do 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
        }
    }

Leva um pouco de tempo, mas menos de um segundo para renderizar uma tabela de cerca de 400 linhas, o que para meus objetivos é bom o suficiente.

Tom Regan
fonte
0

Eu tive esse problema algumas vezes em tabelas geradas pelo Knockout. No meu caso, corrigi usando a solução jQuery encontrada aqui

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;
}
Homer
fonte
-1

Tive o mesmo problema com a grade KendoUI no IE10. Consegui forçar o IE a renderizar novamente as células da tabela ausentes com este hack:

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

Anexar um textNode vazio faz o IE renderizar novamente a tabela inteira.

dfsq
fonte