Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Boletos en 09 de Febrero 2016, 18:59

Título: HTML y CSS diferencias entre tamaño de letra Firefox y Chrome px y em CU01044D
Publicado por: Boletos en 09 de Febrero 2016, 18:59
Hola!! A todos. Despues de partirme los ojos comprobando si los tipos eran iguales, o una micra arriba, u otra abajo. Os dejoel ejercicio CU01044D sin diferencias apreciables entre Firefox y Chrome.

Solo noté que cuando los caracteres son muy pequeños (no se por qué, Chrome no parece gestionarlos bien) y con unidades "em", comienza a dar saltos al cambiar décimas de unidades. Quiero decir: 0.65 parece igual a 0.69 y este último muy distinto de 0.7.

En fin!! Una rayada.


html:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="palabras-clave"/>
<meta name="description" content="Ejercicio 1044"/>
<title>ejer1044</title>
<link rel="stylesheet" type="text/css" href="ejer1044.css"/>
</head>
<body>
                <!--Control-->
<div><h3 class="inlineBlock">7</h3><span style="font-size:1.125em; font-weight:bold;">7</span></div>
                <!--Fin Control-->
<table border="1px" class="inlineBlock" id="Firefox">
<caption>Firefox</caption>
<tr>
<th>Tipo de título</th>
<th>Píxeles</th>
<th>em</th>
</tr>
<tr>
<th><h1>h1</h1></th>
<td>32</td>
<td>2</td>
</tr>
<tr>
<th><h2>h2</h2></th>
<td>24</td>
<td>1.5</td>
</tr>
<tr>
<th><h3>h3</h3></th>
<td>18</td>
<td>1.125</td>
</tr>
<tr>
<th><h4>h4</h4></th>
<td>16</td>
<td>1</td>
</tr>
<tr>
<th><h5>h5</h5></th>
<td>13</td>
<td>0.8</td>
</tr>
<tr>
<th><h6>h6</h6></th>
<td>11</td>
<td>0.7</td>
</tr>
</table>
<table border="1px" class="inlineBlock" id="Chrome">
<caption>Chrome</caption>
<tr>
<th>Tipo de título</th>
<th>Píxeles</th>
<th>em</th>
</tr>
<tr>
<th><h1>h1</h1></th>
<td>32</td>
<td>2</td>
</tr>
<tr>
<th><h2>h2</h2></th>
<td>24</td>
<td>1.5</td>
</tr>
<tr>
<th><h3>h3</h3></th>
<td>18</td>
<td>1.125</td>
</tr>
<tr>
<th><h4>h4</h4></th>
<td>16</td>
<td>1</td>
</tr>
<tr>
<th><h5>h5</h5></th>
<td>13</td>
<td>0.8</td>
</tr>
<tr>
<th><h6>h6</h6></th>
<td>11</td>
<td>0.7</td>
</tr>
</table> </body>
</html>


css:

Código: [Seleccionar]
/*Ejercicio 1044*/
.inlineBlock{display:inline-block;}
#Firefox{text-align:center;}
#Firefox tr:first-child{background-color:#D8D8D8;}
#Firefox tr:nth-child(2) td{font-size:32px; font-weight:bold;}
#Firefox tr:nth-child(3) td{font-size:24px; font-weight:bold;}
#Firefox tr:nth-child(4) td{font-size:18px; font-weight:bold;}
#Firefox tr:nth-child(5) td{font-size:16px; font-weight:bold;}
#Firefox tr:nth-child(6) td{font-size:13px; font-weight:bold;}
#Firefox tr:nth-child(7) td{font-size:11px; font-weight:bold;}
#Chrome{text-align:center;}
#Chrome tr:first-child{background-color:#D8D8D8;}
#Chrome tr:nth-child(2) td{font-size:2em; font-weight:bold;}
#Chrome tr:nth-child(3) td{font-size:1.5em; font-weight:bold;}
#Chrome tr:nth-child(4) td{font-size:1.125em; font-weight:bold;}
#Chrome tr:nth-child(5) td{font-size:1em; font-weight:bold;}
#Chrome tr:nth-child(6) td{font-size:0.8em; font-weight:bold;}
#Chrome tr:nth-child(7) td{font-size:0.7em; font-weight:bold;}


Bueno. Un saludiño! De suave. Ah! Graciñas aupa!!
Título: Re:HTML y CSS diferencias entre tamaño de letra Firefox y Chrome px y em CU01044D
Publicado por: Ogramar en 11 de Febrero 2016, 09:24
Buenas Boletos No hacía falta partirse los ojos  :'( pero bueno lo has hecho perfecto!

Los saltos en Chrome ten en cuenta que cada navegador puede hacer cosas distintas de otro, es posible que Chrome haga un redondeo cuando se trata de decimales o valores pequeños

Salu2