2011-10-10 20 views
18

Durante mucho tiempo he estado usandofont-size: 62,5% vs. font-size: 10px

body {font-size:62.5%;} 

en los documentos CSS ya que se supone que hace 1em igual 10px. Sin embargo, recientemente noté que este no es el caso para mí en Internet Explorer. Así que en su lugar probé el código:

html {font-size:100%} 
body {font-size:10px} 

Ahora esto funciona como un encanto para mí. Mi pregunta es:

¿Cuál es el inconveniente de esta solución ya que no puedo encontrar a nadie más usándola?

Para aclarar: posteriormente especifico todos mis tamaños de fuente, anchos, alturas, etc. en em. Solo en el cuerpo utilizo 10px en lugar de 62.5%.

+0

Tal vez este hilo que puede dar más comprensión de la cuestión: [qué-em-lugar-de-px] [1] [1]: http://stackoverflow.com/questions/609517/why-em-instead-of-px –

+1

Me gusta la fuente de píxeles tamaños también ... Siento que tengo un mejor control de diseño. El inconveniente solía ser que no se escalaba bien cuando las personas aumentaban manualmente su tamaño de texto ... las cosas se romperían/​​desbordarían. Usar '%' o 'em' compensaría mejor estos problemas de espaciado. Sin embargo, en estos días, los navegadores más nuevos se están moviendo más hacia un verdadero "zoom" de entrada/salida, lo que hace que los viejos problemas de tamaño de texto aumenten o disminuyan. – Sparky

+0

Bueno, realmente quiero ir con em por razones de accesibilidad. Gracias por el enlace, pero todavía no entiendo la diferencia. En ambos casos, 1em será 10px en Firefox, pero para mí 1em será un poco más grande en Internet Explorer. – RichardL

Respuesta

9

Va a obtener argumentos para ambos lados de este problema. Supongo que la mayoría va a discutir por%. Pero usted pidió inconvenientes o trampas

El principal inconveniente que encontraría sería si se topa con un navegador o dispositivo que respeta su configuración de píxeles en lugar de un porcentaje de lo que es predeterminado, y esa configuración de píxeles resultó ser problemática o demasiado pequeño para leer. Si ese navegador no le ofreció al usuario la oportunidad de escalar la fuente o ampliar la página, entonces podría tener un problema potencial.

Dicho todo esto, casi todos los navegadores actuales tienen ese valor predeterminado en 16px. No puedo explicar por qué el IE en tu caso lo está dimensionando de manera diferente. Si opta por un diseño de tamaño de píxel perfecto, use px, de lo contrario, le sugiero que se quede con el%.

+0

Gracias por esta respuesta. Era lo que estaba buscando, a pesar de que todavía presenta un problema para mí. Tal vez voy a probar el sitio en otra CPU con IE para ver si todavía tengo el mismo problema. Si lo tiene, entonces algo más en mi código debe estar causando esto. – RichardL

+0

si es la respuesta que estabas buscando, márcala como una respuesta correcta para que obtenga sus puntos =) –

0

es posible que utilices:

html {font-size:10px} 

Así que sabe que puede funcionar con real o em sin cálculos complejos: 1 rem = 10px 2 rem = 20px

Cuestiones relacionadas