Autor Tema: HTML y CSS diferencias entre tamaño de letra Firefox y Chrome px y em CU01044D (Leído 2761 veces)

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!!

Ogramar · « **Respuesta #1 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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: