JQuery Doctype CSS Bug com o IE 6 e 7 - Modo Quirks

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

  •  19-09-2019
  •  | 
  •  

Pergunta

Ok, comportamento estranho quando deve funcionar:

O problema é que, se eu não declarar um Doctype, o CSS funciona no IE 6 e 7, mas se eu declarar o doctype, ele não funciona. Por que???

jQuery:

$('tr:first-child').children().css({
   'width': settings.minWidth + 'px',
   'height': settings.tableHeaderHeight + 'px',
   'overflow': 'hidden',
   'white-space': 'nowrap',
   'color': 'blue'
});

Html w/ doctype - Por favor, veja no Firefox e IE 6 e 7 para ver a diferença de cabeçalho da mesa

Html wo/ doctype - Por favor, veja no Firefox e IE 6 e 7 para ver a diferença de cabeçalho da mesa

Doctype estou declarando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Então, depois de um comentário útil, descobri que o modo Quirks está sendo usado quando não adiciono o Doctype, que é o efeito CSS que eu quero, mas com um doctype, ugh !!!

Algum trabalho em torno? Sugestões?

Solução, sim !!!

jQuery

// This adds a div tag around the table header text 
//  - IE white-space bug in standard mode
$('table.className tr th').wrapInner(
  "<div class='ie_correct_header_whitespace'></div>"
);

CSS

.ie_correct_header_whitespace {
   white-space: nowrap;
}
Foi útil?

Solução

Primeiro de tudo, aconselho seriamente você a fazê -lo funcionar no modo de padrões. Confiar no modo peculiar para fazer qualquer layout 'Just Work' não é uma abordagem muito saudável.

Você pode envolver seu conteúdo em um elemento de bloco, digamos um elemento div e depois colocar sua div no cabeçalho da mesa. O transbordamento e a largura devem ser respeitados dessa maneira no modo de padrões, fornecendo o efeito desejado.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top