Hola

En Firefox, Safari, Internet Explorer, Microsoft Edge, Opera trabajan perfectamente, pero en chrome, no me las detecta, lo curioso es que entro a vista de diseño adaptable en chrome y si me lo detecta, pero en el navegador como tal el chrome no me lo lee

Lo que intento es tener una capa contenedora con overflow: hidden y adentro una capa con float left y otra float right cuando la resolucion es mayor a 600, cuando la resolución es baja, la capa que era float: right se convierte en float: left, yo lo puedo resolver con una capa entre las dos capas, que use un widht:12%; y un min-width:0px y que sea display: inline-block, pero aun asi la capa de la derecha aun no se posiciona bien en chrome a diferencia de los demas navegadores

Código CSS :

   @media (min-width : 300px) and (max-width : 600px) {
      body{
         width:300px;
      }
      .redonderecha{
         position:absolute;
      }
      .CapaLogin{
         position:absolute;
         float:left;
         margin-top:65px;
      }
      #AjaxCapaX{
         float:left;
         position:absolute;
         margin-top:145px;
      }
   }
   @media (min-width : 600px) and (max-width : 1300px) {
      .redonderecha{
         position:relative;
         float:left;
      }
      .CapaLogin{
         position:relative;
         float:right;
      }
      #AjaxCapaX{
         float:right;
         position:relative;
         margin-top:77px;
      }
   }
.contienecabecera{   
   width:98%;
   overflow:hidden;
}
.redonderecha{
   display:inline-block;
   height:70px;
   width:300px;
}
.CapaLogin{
   display:inline-block;
   margin-left:0px;
   min-width:290px;
}


No puse todo, para no perdernos entre tanto css, pero chrome no lo detecta
y la W3C, dice que si es valido

W3C