[SOLUCIONADO] Problema con Media-query en Chrome

[pato_cuack]

Hola conocedores,

Tengo un problema que me está rompiendo los cocos y la cabeza >_< necesito ajustar unos botones en un sitio web, en firefox, se ve una maravilla... en IE se ve una mierda porque no tiene estilos para IE, pero al revisar con google chrome veo que todo se ve bien salvo estos botones... revisé todo el responsive y funciona bien, pero no entiendo porque con caché en 0 y dns también limpias, no me está tomando el media query que se supone debe funcionar para web kit.

Acá les dejo el sitio para que hagan una comparación en los navegadores y este es el código que estoy usando para ajustar las secciones

Agradezco cualquier ayuda que me puedan brindar

Código CSS:

@media screen and (-webkit-min-device-pixel-ratio: 1.5){
 
/*@media all and (-webkit-min-device-pixel-ratio:1) and (min-resolution: .001dpcm){*/
 
div#optin_area input[type="submit"] {
  background: transparent url('/signupultimo.png') no-repeat 0 0;
  height: 100px;
  width: 100px;
  border: 0px solid #FFFFFF;
  display: inline-block;
  text-indent: 0;
  padding: 0;
  text-transform: capitalize;
  cursor: pointer;
  position: relative;
  top: 44px;
}
 
div#optin_area input[type="submit"]:hover {
background: transparent url('singup2.png') no-repeat 0 0;
height: 100px;
width: 100px;
border: 0px solid #FFFFFF;
display: inline-block;
text-indent: 0;
padding: 0;
text-transform: capitalize;
cursor: pointer;
top: 44px;
}
 
div#moonray_smart_form input[type="submit"] {
  background: transparent url('/signupultimo.png') no-repeat 0 0;
  height: 100px;
  width: 100px;
  border: 0px solid #FFFFFF;
  display: inline-block;
  text-indent: 0;
  padding: 0;
  text-transform: capitalize;
  cursor: pointer;
  position: relative;
  top: 41px;
}
 
div#moonray_smart_form input[type="submit"]:hover {
background: transparent url('/singup2.png') no-repeat 0 0;
height: 100px;
width: 100px;
border: 0px solid #FFFFFF;
display: inline-block;
text-indent: 0;
padding: 0;
text-transform: capitalize;
cursor: pointer;
}
 
div#moonray_smart_form {
  display: inline-block;
    float: left;
    margin: -29px 0 34px 222px !important;
    position: relative;
}
 
div#optin_area input[type="text"] {
position: relative;
padding: 6px;
font-weight: bold;
-webkit-box-shadow: inset 0 17px 14px -20px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 17px 14px -20px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 17px 14px -20px rgba(0, 0, 0, 0.5);
width: 198px;
margin-right: 5px;
margin-top: 82px;
 
}
 
 
div#foot_img{
    float: left;
    margin-left: 4px;
}   
}
 

[NueveReinas]

¿No has probado quitándole el -webkit-min-device-pixel-ratio: 1.5?

Dejando solo esto:

Código CSS:

@media all and (min-width: XYZpx) {
/* Código */
}
 

[pato_cuack]

hola, sí, claro que lo he hecho, pero me desajusta todo en los demás navegadores :l y estuve leyendo y esa es la media query que se utiliza con google chrome el lío es que aveces la toma y en otras ocasiones nada... hasta me daña el responsive

[fede5426]

Proba con Normalize.css

[pato_cuack]

Hola,

No nada, al final lo que se hizo fue poner el ratio en 1 o en 0 y ya.

Código CSS:

@media screen and (-webkit-min-device-pixel-ratio: 1.5)/*Esto*/
@media screen and (-webkit-min-device-pixel-ratio: 0/*por Esto*/