Edição jQuery UI diálogo Com IE

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

Pergunta

Eu estou usando o novo jQuery 1.3.2 e jQuery-ui-1,7 bibliotecas junto com o diálogo UI. Eu tenho uma tag div com elementos de vários formulário (caixa de texto, caixa de seleção, etc.) na mesma. Após a página carregar, jQuery mostra a div como um diálogo. Isso funciona perfeitamente bem no FF, mas no IE, a altura da div está errado. É apenas mostrando o título bar um pouco do conteúdo. I definir explicitamente a altura ao criar o div. Se definir a opção altura após a abertura da janela, a altura é corrigida, mas o conteúdo é em branco (mostra o terço superior de uma caixa de texto). Se eu permitir que o diálogo a ser redimensionável, se você redimensioná-la no IE ele funciona bem, mas eu não quero forçar usuários do IE para redimensionar apenas para ver o conteúdo. Alguma ideia? Aqui está o código que usei para criar o diálogo: 

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) {
        if($('#agree').val() != '1')
            location.href = 'somepage.html';
    }
});
Foi útil?

Solução 6

Eu respondi minha própria pergunta. Eu só tinha que jogar com as propriedades de altura de diálogo e alguns dos elementos dentro do diálogo. Boa me chamada!

Outras dicas

Depois de fazer algumas pesquisas no Google, encontrei a verdadeira resposta para a pergunta. É causada por um DOCTYPE incompatível. Por favor, vá para http://osdir.com/ml/jquery-ui /2009-08/msg00388.html para obter mais informações.

Eu tentei-o em meus códigos e a solução neste URL não resolve o problema.

Eu estava tendo esse mesmo problema no IE7 e tomou um olhar mais profundo sobre os sintomas e solução. Notei que quando eu criei um diálogo fictício sem conteúdo, em seguida, a altura processada corretamente. Assim, comecei a brincar com vários tipos de conteúdo para ver se eu poderia escrever o conteúdo de forma diferente para superar o problema. Sem sorte. O que eu descobri, no entanto, foi que o que eu mais conteúdo adicionado, menor será o diálogo entrou no IE7 única (até itens escondidos encurtá-lo um pouco). Assim, conteúdo simples provavelmente não terá muito efeito visível (e, portanto, a falta de mais queixas sobre este assunto). A tabela e muitos itens do formulário eu estava adicionando criar um efeito muito perceptível.

Ajustar a altura para auto funciona um pouco bem, mas IE7 ainda miscalculates a altura no meu conteúdo por cerca de 10 pixels muito curta (possivelmente a altura preenchimento em um objeto) e, assim, jQuery adiciona a barra de rolagem. Não é perfeito, mas aceitável, dado que se segue.

Depois de não encontrar outra solução, eu comecei a olhar para a solução DOCTYPE. Eu descobri que DOCTYPE do nosso site - embora pareça correta - ele realmente coloca todos os navegadores em "Modo Quirks" e que esta é a verdadeira origem do problema. Duvido que jQuery suporta peculiaridades questões de modo que eu duvido que isso vai sempre ser corrigido.

Meu DOCTYPE atual:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

O que deve ser:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Mesmo este DOCTYPE mais velho funcionou:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

Assim, não é que o DOCTYPE deve ser o valor de <!DOCTYPE html> HTML 5, é que ele deve ser um DOCTYPE válido (HTML 4 ou 5 - não tenho certeza sobre XHTML) que irá definir IE7 para algo diferente de peculiaridades modo (Firefox funciona muito bem também). Veja:

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

Eu não tenho a opção de alterar DOCTYPE do nosso site, por isso tenho de usar uma outra solução, como altura automática. Notei há outras diferenças entre peculiaridades e modos padrões quando usando o diálogo de jQuery então eu tenho que lidar com aqueles, bem como (ou seja, percentagens font-size são acumuladas de forma diferente em ambos IE7 e Firefox).

me deparei com o mesmo problema também. Sim, não especificando a altura, o IE faz redimensionar a caixa de diálogo e mostra o seu conteúdo. No entanto, eu não quero que a caixa de diálogo modal para continuar crescendo como os conteúdos ficam mais longos. O ideal seria para exibir a caixa de diálogo com a altura especificada e os usuários podem visualizar o conteúdo usando a barra de rolagem. Isso funciona perfeitamente no FireFox. Alguém tem uma solução para o IE?

Eu era capaz de corrigir isto dando uma unidade na altura como esta: 

$(id).dialog({ modal: true, height: h + "px", width: w });

Eu não tem que mexer com o doctype. Este foi no IE8, jQuery 1.4.4 e jQuery UI 1.8.9.

- era rápida para deixar um presente. Que quebra-lo no Firefox. Ignore-me!

Eu tenho problemas semelhantes quando se utiliza font-tamanhos em pixels. font-size: 11px - font-size: 15px; em css causado os problemas de altura no IE9. fonte de tamanho: 16 pixels; e até funciona bem no IE9

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