Se houver semelhança, fico honrado; se for reimpresso, por favor indique
Solução alternativa para fazer com que IE6 IE7 IE8 IE9 IE10 IE10 suporte Bootstrap
Recentemente criei um site, sempre achei que o bootstrap é muito bom. Desta vez usei bootstrap3, Chrome, Firefox, Safari, Opera, navegador 360 (modo de velocidade), navegador Sogou e outros navegadores não tiveram problemas. E sob IE8 e IE11 descobri que o estilo não podia ser exibido. Depois, vários Baidu, finalmente, com a ajuda de um post de internauta no Yapeng.com resolveram o problema. Também consulte a Qianxun Learning Network A solução é resumida da seguinte forma:
Primeiro, certifique-se de que sua página HTML comece com uma declaração DOCTYPE. O DOCTYPE informa ao navegador qual especificação HTML ou XHTML usar para analisar um documento HTML, o que afeta os seguintes fatores:
Restrições sobre atributos e propriedades de tags
Afeta o modo de renderização do navegador, e diferentes modos de renderização afetam a análise do código CSS e até mesmo scripts Javascrip{filter}t pelo navegador
O DOCTYPE é fundamental, e a melhor prática atual é digitar na primeira linha do documento HTML:
<!DOCTYPE html>
Existem várias razões para encontrar o bootstrap resumidas no post do deus; primeiro, o Bootstrap3 foi desenvolvido com base no princípio do dispositivo móvel, então as razões podem ser as seguintes:
1. O endereço remoto não está sendo chamado corretamente
Ou seja, desde que seja IE9 ou inferior, chame dois js especiais
<!-- suporte ao HTML5 Shim e Respond.js IE8 para elementos HTML5 e consultas de mídia -->
<!--[se for for for o IE 9]>
<scrip{filter}t src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></scrip{filter}t>
<scrip{filter}t src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></scrip{filter}t>
<![endif]-->
Mas testei e descobri que usar apenas os arquivos js acima não é viável,
2. O método de chamada está incorreto
Não faça referência a arquivos respond.min.js, respond.js ou CSS em formulários file:// ou @import
3. Identificar o conteúdo do navegador (usando metatags para ajustar o método de renderização do navegador)
O bootstrap não suporta o modo de compatibilidade do IE e, para que o IE execute o modo de renderização mais recente, as seguintes tags serão adicionadas à página
IE=edge significa que o kernel IE mais recente é forçado, e chrome=1 significa que, se o plug-in Google Chrome Frame para IE6/7/8 e outras versões estiver instalado (que pode fazer o navegador do usuário ainda parecer o menu e interface do IE, mas o usuário está realmente usando o kernel do navegador Chrome ao navegar na web), então o kernel Chrome é usado para renderizar. Para uma explicação específica dessa meta tag, veja a ótima resposta no StackOverflow, e a <meta>explicação em inglês do especialista em tags pode ser encontrada aqui
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
Acrescentei
<meta http-equiv="X-UA-Compatible" conteúdo="IE=9" />
E aí vai você
O kernel controla a meta tag, porque os navegadores principais atuais na China são kernels duplos, então a meta tag é adicionada para informar ao navegador qual kernel usar para renderizar a página
4. O IE8 não suporta várias propriedades de contêineres
O IE8 não suporta totalmente o tamanho de caixas: a caixa de borda é usada com largura mínima, largura máxima, altura mínima ou altura máxima. Portanto, a classe container no bootstrap v3.0.1 não usa mais largura máxima.
5.JS problema causado pela ordem em que o CSS é introduzido
Você precisa citar CSS antes de referenciar o js
<link rel="folha de estilo" tipo="texto/css" href="bootstrap.min.css" media="tela"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>
6. DOCTYPE possui linhas em branco antes e depois
<!DOCTYPE html>
Não é aceitável ter espaços aqui, você precisa remover os espaços
<html>
7. Você também pode modificar o bootstrap.css manualmente
Se você está usando o bootstrap 2.1.1, modificar navbar-inner{ filter:none} pode resolver o problema; se você está usando a versão 3.0+, não há código, por favor, veja a conexão para mais detalhes
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. Use o modo de individualidades
Ao definir uma página web, o modo compatível com navegadores antigos é o modo quirks, e o "modo padrão" correspondente é o modo padrão. Especificamente, o <!DOCTYPE html> é escrito como antes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Testei isso, mas não é viável
Por fim, testei sob IE11, mas testei sob IE8 e encontrei um problema de que o placeholder não é suportado
Veja como resolver o suporte do IE para placeholders
O jquery referenciado neste artigo é testado na versão 1.11.1, e o jquery é referenciado primeiro
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
Você também pode usar outras versões do jquery
Depois, introduza <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
jquery.placeholder.js endereço de download para este arquivo https://github.com/mathiasbynens/jquery-placeholder
Depois, adicione um pouco de código ao arquivo
<scrip{filter}t type="text/javascrip{filter}t">
$(função () {
Invocar o plugin
$('entrada, área de texto').marcador de lugar();
});
</scrip{filter}t>
Se eu estiver envolvido aqui ou se o problema ainda não for resolvido, por favor, avancem http://hustlzp.com/post/2014/01/ie8-compatibility mais detalhes
Os testes acima como IE6, 7, 8, 9, 10, 11, Chrome, Firefox, Safari, Opera, navegador 360 (modo de velocidade), teste do navegador Sogou passado, apenas o IE5.5 parece inviável, em resumo, o problema está resolvido aqui, todo IE6 maligno - chame de molho de soja
Se você não quiser usar jquery.placeholder.js, não pode mais suportar implementações de emulação de placeholder nos navegadores
Você pode consultar este artigo para uma http://ju.outofmemory.cn/entry/1595 muito detalhada |
Publicado em 03/08/2016 22:55:23
|
|
|
Senhorio