Diferencia con porcentajes entre Firefox y Chrome

Dany_s · #1 (**permalink**) 13/08/2010, 08:16

¿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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>JSP Page</title>
        <style>
            *{ font-size:11px; font-family: Arial, Verdana, Helvetica, sans-serif;}
 
            .contenedor{ width:380px; height:400px; background:#6FB7FF; padding:0.3%}
            
            .de100, .de50, .de33{display:inline; float:left; background:white; padding:1%; margin:0 1% 1% 0; }
            .de100{ width:98%; }
            .de50{ width:47.5%; }
            .de33{ width:30.666%; }
 
            .forms label{color:#4f6da4;}
            .forms .text{width:99%; border:1px solid #ccc; background:#fbfbfb}
 
            .noMargin{margin-right:0%}
        </style>
    </head>
    <body>
        <div class="contenedor forms">
 
            <div class="de100">
                <label>Nombre
                    <input type="text" class="text" />
                </label>
            </div>
 
            <div class="de50">
                <label>Nombre
                    <input type="text" class="text" />
                </label>
            </div>
            <div class="de50 noMargin">
                <label>Nombre
                    <input type="text" class="text" />
                </label>
            </div>
 
            <div class="de33">
                <label>Nombre
                    <input type="text" class="text" />
                </label>
            </div>
            <div class="de33">
                <label>Nombre
                    <input type="text" class="text" />
                </label>
            </div>
            <div class="de33 noMargin">
                <label>Nombre
                    <input type="text" class="text" />
                </label>
            </div>
        </div>
    </body>
</html>

Facundo72 · #2 (**permalink**) 13/08/2010, 11:49

¿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)

Dany_s · #3 (**permalink**) 13/08/2010, 16:46

tengo un reset en un archivo aparte, pero igual

kseso? · #4 (**permalink**) 13/08/2010, 17:04

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%

Dany_s · #5 (**permalink**) 13/08/2010, 17:24

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>JSP Page</title>
        <style>
            body{background:#ccc}
            .contenedor{ width:380px; height:100px; background:#6FB7FF;}
            .de50, .de33, .de99, .casi100{float:left; height:20px; background:white; margin-bottom:1%; }
            .de50{ width:50%; }
            .de33{ width:33.333%; }
            .de99{ width:99.5% }
            .casi100{ width:99.999% }
        </style>
    </head>
    <body>
        <div class="contenedor">
 
            <div class="de50"></div>
            <div class="de50"></div>
 
            <div class="de33"></div>
            <div class="de33"></div>
            <div class="de33"></div>
 
            <div class="de99"></div>
 
            <div class="casi100"></div>
        </div>
    </body>
</html>