Foros del Web » Creando para Internet » CSS »

Diferencia con porcentajes entre Firefox y Chrome

Estas en el tema de Diferencia con porcentajes entre Firefox y Chrome en el foro de CSS en Foros del Web. ¿Porqué Firefox y Chrome calculan el porcentaje de manera diferente? Les paso el ejemplo, en firefox las filas encajan bien del lado derecho pero en ...
  #1 (permalink)  
Antiguo 13/08/2010, 09:16
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 8 años
Puntos: 65
Diferencia con porcentajes entre Firefox y Chrome

¿Porqué Firefox y Chrome calculan el porcentaje de manera diferente?

Les paso el ejemplo, en firefox las filas encajan bien del lado derecho pero en chrome no, quedan con margen
Hasta en ie8 queda bien
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <head>
  3.         <title>JSP Page</title>
  4.         <style>
  5.             *{ font-size:11px; font-family: Arial, Verdana, Helvetica, sans-serif;}
  6.  
  7.             .contenedor{ width:380px; height:400px; background:#6FB7FF; padding:0.3%}
  8.            
  9.             .de100, .de50, .de33{display:inline; float:left; background:white; padding:1%; margin:0 1% 1% 0; }
  10.             .de100{ width:98%; }
  11.             .de50{ width:47.5%; }
  12.             .de33{ width:30.666%; }
  13.  
  14.             .forms label{color:#4f6da4;}
  15.             .forms .text{width:99%; border:1px solid #ccc; background:#fbfbfb}
  16.  
  17.             .noMargin{margin-right:0%}
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div class="contenedor forms">
  22.  
  23.             <div class="de100">
  24.                 <label>Nombre
  25.                     <input type="text" class="text" />
  26.                 </label>
  27.             </div>
  28.  
  29.             <div class="de50">
  30.                 <label>Nombre
  31.                     <input type="text" class="text" />
  32.                 </label>
  33.             </div>
  34.             <div class="de50 noMargin">
  35.                 <label>Nombre
  36.                     <input type="text" class="text" />
  37.                 </label>
  38.             </div>
  39.  
  40.             <div class="de33">
  41.                 <label>Nombre
  42.                     <input type="text" class="text" />
  43.                 </label>
  44.             </div>
  45.             <div class="de33">
  46.                 <label>Nombre
  47.                     <input type="text" class="text" />
  48.                 </label>
  49.             </div>
  50.             <div class="de33 noMargin">
  51.                 <label>Nombre
  52.                     <input type="text" class="text" />
  53.                 </label>
  54.             </div>
  55.         </div>
  56.     </body>
  57. </html>
  #2 (permalink)  
Antiguo 13/08/2010, 12:49
 
Fecha de Ingreso: julio-2010
Mensajes: 15
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Diferencia con porcentajes entre Firefox y Chrome

¿Por que no aplicas un reset antes? Algo así:

*{
margin:0;
padding:0;
}

A ver si funciona.

(también puedes googlear Eric Meyer reset css)
  #3 (permalink)  
Antiguo 13/08/2010, 17:46
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 8 años
Puntos: 65
Respuesta: Diferencia con porcentajes entre Firefox y Chrome

tengo un reset en un archivo aparte, pero igual
  #4 (permalink)  
Antiguo 13/08/2010, 18:04
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Diferencia con porcentajes entre Firefox y Chrome

Posíblemente las diferencias vengan dadas por el uso que hace de decimales en los porcentajes y el redondeo/distribución que hace cada navegador.

Sería conveniente que evitase en la medida de lo posible cosas como:
width:30.666%;
padding:0.3%
  #5 (permalink)  
Antiguo 13/08/2010, 18:24
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 8 años
Puntos: 65
Respuesta: Diferencia con porcentajes entre Firefox y Chrome

es eso

33.333 x 3 redondea a 99.5% en chrome, que deberia ser 99.999

puse 3 divs de 33.333% y abajo otro de 99.5% y son iguales

pero puse otro de 99.999% y pasa un poco a los de 33.333% que éste debería ser igual al de los 3 de 33.333%

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.     <head>
  3.         <title>JSP Page</title>
  4.         <style>
  5.             body{background:#ccc}
  6.             .contenedor{ width:380px; height:100px; background:#6FB7FF;}
  7.             .de50, .de33, .de99, .casi100{float:left; height:20px; background:white; margin-bottom:1%; }
  8.             .de50{ width:50%; }
  9.             .de33{ width:33.333%; }
  10.             .de99{ width:99.5% }
  11.             .casi100{ width:99.999% }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <div class="contenedor">
  16.  
  17.             <div class="de50"></div>
  18.             <div class="de50"></div>
  19.  
  20.             <div class="de33"></div>
  21.             <div class="de33"></div>
  22.             <div class="de33"></div>
  23.  
  24.             <div class="de99"></div>
  25.  
  26.             <div class="casi100"></div>
  27.         </div>
  28.     </body>
  29. </html>

Etiquetas: chrome, diferencia, firefox, porcentajes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:53.