Bug no Internet Explorer 7
26/10/06
Quer ver uma coisa bizarra? Sempre que preciso colocar uma imagem em um input "submit", uso o CSS abaixo:
input {
background: url(image.png) no-repeat;
border: none;
text-indent: -999px;
cursor: pointer;
width: 50px;
height: 50px;
/*
essas regras devem ser aplicadas
com um conditional comment, mas a título
de exemplo, vamos usar este hack.
*/
_padding: 9999px;
_overflow: hidden;
}
Funcionava perfeitamente no IE6 ou menor e no Firefox. Agora, sabe o que acontece quando tento acessar no IE7? Nada! Ele simplesmente não exibe o botão.
<html>
<head>
<title>IE7</title>
</head>
<body>
<form>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
Mas olha que curioso. Se eu adicionar um elemento antes do botão, ele irá aparecer.
<body>
<form>
ABC<input type="submit" value="Enviar" />
</form>
</body>
Não adianta ter tags se elas não estiverem no mesmo nível do botão. Assim, o código abaixo também não exibirá nada.
<body>
<h1>Bug no IE7</h1>
<form>
<input type="submit" value="Enviar" />
</form>
</body>Uma outra solução é colocar o CSS float: left.
Esse bug, no mundo real, provavelmente não iria acontecer já que um botão "submit" sozinho numa página não faz nenhum sentido. Mas que isso não faz dele menos bizarro, não faz mesmo! Se quiser ver os arquivos de exemplo, acesse a versão com bug e a versão funcionando.
- Olá! Eu sou Nando Vieira e este é meu blog, onde falo sobre desenvolvimento web.
- Busca
- Blogroll (Random)
- Sounds Like
- Walter Cruz
- Ronaldo Ferraz
- TaQ
- Cris Dias
Comentários #
Acho que bizarro mesmo seria não encontrar um bug no IE7 :D
Mas brincadeiras à parte, realmente não dá para entender algo assim, parece até que os caras que desenvolvem o IE fazem de propósito isso.
Realmente dá para rir.. já enviou para a IE team ? =) A ver se corrigem isso na próxima versão.
O melhor esquema seria usar um button ao inves de um input. Um button com uma imagem dentro. Assim:
button{
border:none;
background:#fff;
}
Mas, realmente, é improvável que isso aconteça no mundo real, então acho que não há muito mesmo com o que se preocupar.
Marco: não mandei ainda! Mas certamente o farei!
Bruno: pensei em usar o button, mas com um span dentro. Aí, fica fácil de aplicar o CSS. Algo como:
Não testei, mas acredito que vá funcionar!
É muito mais interessante utilizar um submit mesmo, uma vez que com o button precisaremos de um JavaScript.
Fico chateado pacas com esses bugs, eles simplesmente atrasam nossas vidas durante o desenvolvimento, aff.
PS. Envie pra eles mesmo cara, quem sabe eles corrigem.
Leandro, na verdade não precisa de Javascript. Existe o
. O segundo funciona exatamente como o
Se este bug fosse no Firefox, eu arriscaria a ficar chateado ;)
Interessante, eu devo confessar a minha ignorância e dizer que desconhecia a tag
Sempre usei o "instead" =P.
Algo me diz que mais bizarrices estão por vir.
Abraços
Depois de "..tag" eu escrevi button, e antes do "(…)instead" input. Colocando as tags elas somem =\.
Solução simples e independente de javascript:
Este elemento equivale a um input do tipo submit. E com a vantagem de se usar a imagem que quiser, sem precisar fazer nenhuma peripécia com css.
Gostei do seu blog, parabéns!
[]'s
Basta usar Enviar.
Mais semântico (já que o que se quer é um botão de submissão, e não um input), mais fácil e mais fexível de manipular via CSS, te dá a possibilidade de inserir mais HTML dentro dele e não gera bugs em nenhum navegador popular.
Dê uma lida neste artigo da Digital Web Magazine pra conhecer mais algumas possibilidades dessa tag pouquíssimo utilizada pelos desenvolvedores hoje em dia. ;)
[...] Neste post, expliquei como eu estava querendo aplicar um fundo a elemento button. Eu e um amigo aqui do UOL descobrimos ontem uma maneira de fazer isso no elemento input. [...]
A tag button tem um bug no IE 6 (no 7 não testei :P), ela deixa o javascript lerdo.
Tinha que ser o IEca IUHSauihs ^^
Corrigindo….
deixa o javascript lerdo quando tem uma imagem transparente dentro de
a tag foi escapada…. ¬¬
último post prometo :P
"deixa o javascript lerdo quando tem uma imagem transparente dentro" da tag button
José, dá uma olhada nesse post. Descobri uma maneira muito melhor de fazer isso.
http://simplesideias.com.br/image-replacement-em-elementos-input/
isso aqui é muito mais simples:
<input type="image" src="http://f.simplesideias.com.br/ie7-bug/ie7.gif" />
Paulista, não sei se você leu os comentários, mas o motivo de não usar type=image é para não deixar uma imagem direto no markup. Se você não se incomoda com isso, sem problema. Eu não gosto e prefiro fazer isso através do CSS.
Dá para por um input type="hidden" antes do "button" ou "submit" que o IE aceita e já mostra o input que não aparecia! :)
Decidi criar botões de comando na página.
Para a função de "Limpar" os campos encontrei :
Para o botão "Imprimir" encontrei :
Preciso agora encontrar a linha de comando para o botão "Save As" ou "Export", pois desejo salvar ou exportar a página com outro nome, porém com os dados preenchidos.
Deixe um comentário