Foros del Web - Ver Mensaje Individual - 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>