Correção para background-position no IE
https://stackoverflow.com/questions/594870
-
09-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu recebo este problema no IE7 ao executar um pedaço de código que usa jQuery e 2 jquery plugins. O código funciona no FF3 e Chrome.
O erro completo é:
Line: 33
Char: 6
Error: bg is null or not an object
Code: 0
URL: http://localhost/index2.html
No entanto linha 33 é uma linha em branco.
Eu estou usando 2 plugins: arrastáveis ??e zoom. Não importa o que eu faço para o código é sempre linha 33 que está em falta. I verificar a fonte tem atualização via fonte de vista, mas eu sinto que este poderia estar mentindo para mim.
<body>
<div id="zoom" class="zoom"></div>
<div id="draggable" class="main_internal"><img src="tiles/mapSpain-smaller.jpg" alt=""></div>
<script type="text/javascript">
$(document).ready(function() {
$('#draggable').drag();
$('#zoom').zoom({target_div:"draggable", zoom_images:new Array('tiles/mapSpain-smaller.jpg', 'tiles/mapSpain.jpg') });
});
</script>
</body>
Essencialmente o que estou tentando fazer é recriar o mapa Pragmatic demonstração Ajax com jQuery.
Parece que a segunda linha deste trecho está causando o problema:
bg = $(this).css('background-position');
if(bg.indexOf('%')>1){
Parece estar tentando selecionar a propriedade background-position da #draggable e não encontrá-lo? adicionando manualmente um background-position: 0 0; não corrigi-lo. Todas as ideias sobre como contornar este problema?
Eu tentei usar o MS Script Debugger, mas que é quase inútil. não pode inspecionar variáveis ??ou qualquer outra coisa.
Solução
Um pouco mais cavando sobre a Interweb revelou a resposta: IE não entender o background-position selector. Ele entende a background-position-x não-padrão e background-position-y.
Atualmente cortar alguma coisa juntos para resolver isso.
Nice um, Redmond.
Outras dicas
Para contornar o fato de que o Internet Explorer não suporta o "background-position" atributo CSS, a partir de jQuery 1.4.3+ você pode usar o . cssHooks objeto para normalizar este atributo entre os navegadores.
Para poupar algum tempo, há um posição de fundo plugin jQuery disponível que permite que ambos "background-position" e "background-position-x / y" ao trabalho como esperado nos navegadores que não suportam um ou outro por padrão.
É interessante. O IE8 não entendo getter backgroundPosition, mas entende setter.
$('.promo3').mousewheel(function(e,d){
var promo3 = $(this);
var p = promo3.css('backgroundPosition');
if (p === undefined) {
p = promo3.css('backgroundPositionX') + ' ' + promo3.css('backgroundPositionY');
}
var a = p.split(' ');
var y = parseInt(a[1]);
if (d > 0) {
if (y < -1107) y += 1107;
y -= 40;
}
else {
if (y > 1107) y -= 1107;
y += 40;
}
promo3.css('backgroundPosition', a[0] + ' ' + y + 'px');
return false;
});
Ele funciona muito bem em IE8 e IE8 vista compatível.
Isso funcionou para mim:
if (navigator.appName=='Microsoft Internet Explorer')
{
bg = $(drag_div).css('backgroundPositionX') + " " + $(drag_div).css('backgroundPositionY');
}
else
{
bg = $(drag_div).css('background-position');
}
espero que ele faz para você.
Você pode querer verificar para se certificar de que você está carregando seus js arquivos na ordem correta para que as dependências são tidos em conta.
Um pouco de pensamento (e uma xícara de chá) mais tarde eu vim com:
if(bg == 'undefined' || bg == null){
bg = $(this).css('background-position-x') + " " + $(this).css('background-position-y');
}
Infelizmente ele retorna centro apesar dos recursos on-line que eu posso encontrar estado deve retornar 0 0 se os valores são indefinidos.
começando a se perguntar se há uma correção real / solução para este. Um monte de pessoas têm tentado e tudo até agora não pegar todos os casos de ponta.
A versão camelCase de backgroundPosition parece viável, mas eu não sei o suficiente de jQuery para fazer uma avaliação precisa de como ir sobre ele - a partir do que eu li que você só pode usar camelCase como getters se a propriedade tiver sido definida anteriormente . Por favor, diga-me se estou enganado.
No entanto linha 33 é uma linha em branco.
Será linha 33 de um dos seus arquivos .js, não linha 33 do próprio HTML. IE falha ao relatório que arquivo real o erro estava em Olhe para linha 33 de cada .js para algo sobre ‘bg’. se o pior vem a pior, você pode começar a inserir novas linhas no início de cada js e veja se o número de linha alterações.
Eu verifico a fonte tem atualização via fonte de vista, mas eu sinto que este poderia estar mentindo para mim.
Ver fonte sempre mostrar o que IE tem a partir do servidor. Ele não vai mostrar quaisquer atualizações para o DOM.
tentar backgroundPosition istead
Além disso, certifique-se de que 'isto' existe e que o seu pedido para um atributo retorna um valor. IE vai jogar este tipo de erros quando você tenta chamar um método em uma propriedade que não existe, portanto, bg é nulo ou nulo um objeto. se você não se preocupam com IE você pode fazer bg = $ (this) ... || '' De modo que há sempre algo referenciado.
Além disso, não relacionada com o erro que você está recebendo, mas é o seu valor de índice de 1 correta? Você quis dizer -1?
Yupp,
Tente background-position vez ou apenas definir o background-position com jQuery antes de chamá-lo. Ill acho que muitas vezes se conhece as posições através de CSS antes de chamá-lo. Ela não é bonita, mas de alguma forma ele fez o truque para mim.)
por exemplo:
//set it in with javascript.
$("someid").css("background-position", "10px 0");
...
//do some funky stuff
//call it
$("someid").css("background-position");
//and it would return "10px 0" even in IE7
Se nada ajuda, também é possível fazer o seguinte truque.
Podemos substituir um fundo de um elemento por um elemento absolutamente posicionado interior (com o mesmo fundo). As coordenadas será substituído por left e top propriedades. Isto irá funcionar em todos os navegadores.
Para melhor compreensão, por favor, verifique o código:
Antes
<div></div>
div {
background: url(mySprite.png);
background-position: -100px 0;
}
Após
<div>
<span></span>
</div>
div {
position: relative;
overflow: hidden;
width: 100px; /* required width to show a part of your sprite */
height: 100px; /* required height ... */
}
div span {
position: absolute;
left: -100px; /* bg left position */
top: 0; /* bg top position */
display: block;
width: 500px; /* full sprite width */
height: 500px; /* full sprite height */
background: url(mySprite.png);
}
Esta solução não é muito flexível, mas me ajudou a mostrar ícones do pairo estado corretamente.
Você não pode usar traços na função jquery css. Você tem que fazê-lo em camelCase:
.css('backgroundPosition') ou .css('backgroundPositionX') e .css('backgroundPositionY') para IE
