Aunque tiene un tema aparentemente asombroso, se puede decir que este artículo es un pasatiempo para personas con dolor de estómago (como yo ~) ~ Por lo general, los desarrolladores tienen su propia forma de relajarse. Se originó a partir de una pregunta sobre fronteras que me hizo alguien xd en el foro, así que decidí averiguarlo. No tomó mucho tiempo escribir el artículo, pero sí mucho tiempo preparar las imágenes. En este artículo, echemos un vistazo a cómo cada navegador entiende los límites.
Los navegadores que participan en esta prueba incluyen casi todos los navegadores de Windows: ie6, ie7, ie8, ie9preview, chrome, firefox, safari, opera, seamonkey. Cada versión es la última versión descargada de Internet. Y debido a que en esta prueba, el rendimiento de IE678 fue consistente, y Firefox y Seamonkey eran nepotismo, se fusionaron en IE8 y Firefox. La siguiente imagen es una captura de pantalla de este navegador:
.jpg)
El orden anterior es intencional. Los motivos se mostrarán en la prueba a continuación y las capturas de pantalla también están organizadas en este orden.
Primero mire la imagen a continuación. Se muestra un DIV de 20X20 en seis navegadores, con un borde superior: 2px y el resto de 1px. No parece haber ninguna diferencia. Esto se debe a que la sutileza de 1px nos impide prestar atención. (De hecho, no necesitamos preocuparnos por todo este asunto~)
.jpg)
Primero simplifique el problema, un lado es de 2 px, tres lados son de 1 px y amplíe el resultado 5 veces. Podemos ver claramente esta diferencia: Opera y Safari son opuestos, IE8 carece de brazos y piernas, y los siguientes tres tipos son consistentes ~ aquí. Cabe señalar que la segunda fila de 3 tiene un efecto gradual en la intersección.
.gif)
Quizás deberíamos hacer más visible este efecto. Cuando solo un lado está en negrita (10 px), las peculiaridades de IE8 se revelan claramente. la ópera y el safari siguen siendo relativos. Los siguientes tres frentes unidos se vuelven gradualmente más evidentes.
.gif)