Quero explicar aos ‘mais novos’, o porquê devemos saber desenvolver FrontEnd para esse famigerado navegador.

Mais especificamente, para o motor de renderização no qual ele se baseia.

Beleza, o Firefox é lindo, o Chrome é uma maravilha, mas é preciso deixarr claro o que é: obrigação do desenvolvedor(nós), e o que é: que o browser deveria de fato fazer.

Corrigir marcação

É um recurso muito interessante, poupa os visitantes de ver muitos sites quebrados. Pois diversos browsers modernos, através de complicadas rotinas, corrigem literalmente uma marcação HTML incorreta. Os motores praticamente adivinham o que o desenvolvedor queria fazer, e faz por eles!

Olha que beleza, podemos ser preguiçosos e ruins, que o FF vai dar um jeito e corrigir!

Balela, se toca! caia na real!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model</title>
<style type="text/css">
* { margin: 0; padding: 0; }
</style>
</head>
<body>
  <div id="main">
    <h1>Titulo

  </div>
  <p>continua normal</p>
</body>
</html>

Problema: não fechei a tag h1. O FF fechou pra mim. O IE não.

Isso é obrigação sua! Faça correto! Não seja dependente de um workaround de terceiros. Aqui que entra a maravilha. O internet explorer não corrije, não arruma teus erros(na maioria das vezes)!

É praticamente como a sua mãe: vai te apontar todos os teus erros, apontando bruscamente o que vc fez, detonando todo o resto do documento.

Eu pessoalmente acho isso ótimo. Aqui começamos a destinguir os bons dos ruins(devs). O mínimo do mínimo é fazer uma marcação consistente, e válida. Obrigação sua.

Atributo incorreto

Erro tosco, absurdo de sintaxe HTML!

<div id="main">
    <h1 id="titulo>Titulo</h1>

  </div>
  <p>continua normal</p>

Visualização:

IE fudeo tudo. FF corrigiu. Quem tá errado ? O FF e nós mesmos. Afinal fizemos errado.

Na minha opinião, o IE está certo, pois mostrou errado algo que fizemos errado.

Box Model

Cara, essa eu acho absurda. Exemplo rápido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model</title>
<style type="text/css">
* { margin: 0; padding: 0; }
#main {
  width: 400px;
  height: 70px;
  background: #ff0;
}
.content {
  width: 200px;
  height: 100px;
  background: #f0f;
}
</style>
</head>
<body>
  <div id="main">
    <div class="content"></div>
  </div><!-- /main -->
</body>
</html>

Explicando o que eu fiz: .content é filha da #main

Porém, notem que o height da filha é maior que o height da mãe. (erro de lógica isso)

Aqui que o ‘bug do ie’ é explicado: o ie trata height como min-height

Notem como no Firefox, acontece oque pedimos: a #main (que é mãe), com menos altura que a filha.
Ridículo! Erramos, deveria estar errado! Não foi bug do ie, foi bug do desenvolvedor !

Value de input centralizado verticalmente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Model</title>
<style type="text/css">
input {
  height: 40px;
}
</style>
</head>
<body>
  <input type="text" name="" />
</body>
</html>

E ai ? pq o FF fez bonitinho e mandou pro centro ?

eu não disse nada pra ele. Não informei um line-height de mesmo valor do height.

São pequenas coisas. Mas que podem nos dar grandes dores de cabeça. O único intuito desse post, é te fazer refletir.

Não estou defendendo o ie. Só quero expor, que muitos dos erros e das dores de cabeça que enfrentamos todos os dias, provém dos nossos próprios erros. E não da engine do navegador.

Culpe a si mesmo, antes de culpar os outros!