Internet Explorer: estouro e flutuar

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

Pergunta

Eu tenho um img dentro de uma div. Tenho posto o img para "float: right", eo div com "overflow: hidden". Porque o div é mais estreita que a img, espero que a parte esquerda do img ser cortado e escondido, o que é realmente o caso no Firefox. No entanto, o IE se recusa a reconhecer o "float: right" propriedade do img, sempre ancorar o img para o lado esquerdo da div e cortando a parte direita do img. Existe uma solução para este problema? Ou estou fazendo algo errado?


** informação de fundo

A razão que eu quero fazer isso é porque eu quero o img a aparecer, com efeitos do jQuery "cego" (da esquerda para a direita) e, em seguida, desaparecer com um efeito cego semelhante (novamente, da esquerda para a direita).

efeito cego padrão do jQuery não lidar com o desaparecimento da esquerda para a direita. Eu estou supondo que a razão para isso é que determinado modo (esconder vs. show) e determinada direção (esquerda vs direita ou superior vs inferior) combinações requer um movimento adicional da posição de topo esquerdo da div. Deixe-me demonstrar com um exemplo. Suponha que nós queremos fazer uma imagem aparecem da esquerda para a direita com o efeito cego. Bem, isso é simples, nós apenas definir o estouro div para oculta, a imagem flutuar à esquerda, em seguida, alterar a largura da div de 0 a largura da imagem. Por outro lado, se queremos agora para tornar a imagem desaparecer da esquerda para a direita com o efeito cego, temos que definir a imagem flutuar direita, e diminuir a largura da div da largura da imagem a 0, enquanto cutucando o do div canto superior esquerdo para a direita, a fim de manter o direito da imagem borda estacionária.

Eu escrevi código para incorporar os movimentos canto superior esquerdo, e ele funciona muito bem em FF, mas falha no IE. Porque o IE não vai respeitar o float:. A direita e, em vez insiste em ancorar a imagem para a esquerda, o efeito é o de "slide" do jQuery em vez da animação "cego"

Foi útil?

Solução

Você pode tentar o seguinte para o IE 7: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="overflow: hidden; width: 150px; direction: rtl;">
   <img src="yourimage.png" style="float: right" />
</div>
</body>
</html>

A direção: styel RTL funciona para mim no IE 8 usando o modo IE 7 Padrões. IE 8 usando o IE 8 padrões não precisa do estilo de direção.

Esperamos que isso pode resolver o seu problema. Eu não tenho certeza se ele vai trabalhar com qualquer outro conteúdo que você pode ter no div, mas parece que para alcançar o efeito que você quer com a imagem.

Outras dicas

Na pior das hipóteses: deslizar um DIV branco sobre o lado esquerdo da sua imagem? Muito cross-platform embora.

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