Mostrar Mensajes
21
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / HTML y CSS diferencias entre tamaño de letra Firefox y Chrome px y em CU01044D
« 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:
css:
Bueno. Un saludiño! De suave. Ah! Graciñas aupa!!
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!!
RSS