CSS que solo se aplica a Chrome?

Question

Este es mi sitio: http://portable-ebook-reader.net

La barra de búsqueda en la parte superior se compone de dos imágenes de fondo. Una es para donde escribirías la frase de búsqueda, la segunda es el botón real para buscar.

Mi problema es que en Chrome la imagen del botón de búsqueda es 2px ALTA. Pero se ve perfecto en IE y FF. Y si modifico el CSS (margin-top: 2px), Chrome se ve bien, pero IE y FF están en mal estado.

¿Alguna idea? He estado buscando durante horas sin suerte.

Gracias!

Answer 1

Haz que se vea bien para FF primero. Luego haz que se vea bien para FF y Chrome. Solo después de que lo veas bien en FF y Chrome, deberías comenzar a preocuparte por cómo se ve en IE. Después de lograr esto, luego comience a ajustar para IE, si es necesario, utilizando * antes de sus reglas de estilo, ejemplo: *margin-top:2px; ajusta el margen superior para IE7 e IE6 exclusivamente.

Después de mirar su código, es difícil decir exactamente qué puede estar causando el problema sin poder probar diferentes soluciones en mi sistema. Pero aquí hay algunas cosas que usted puede tratar de cambiar en su archivo styles.css (ubicado en la carpeta de 'Chronicle' dentro de la carpeta 'temas') que pueden corregir el problema:

• aplicar el mismo valor de altura a ambos sus #s#searchsubmit y conjuntos de reglas
• eliminar font: 14px "century gothic", Arial, Helvetica, sans-serif; de #searchsubmit
• después de hacer lo anterior, si es que todavía no se ve bien tanto en FF y Chrome, establecer el primer y segundo valores de relleno para su #s conjunto de reglas a 0 (es decir, cambie 8px a 0px) y luego agregue un margin-top: declaración tanto a #s y #searchsubmit y dar a ambos el mismo valor, por ejemplo margin-top:8px;
• si sigues teniendo problemas, intente copiar esta línea: font: normal 100% "Tahoma", Arial, Helvetica, sans-serif; de su conjunto de reglas #s y agregarlo a su #searchsubmit conjunto de reglas, de modo que aparece en ambos conjuntos de reglas.

Hay tantas posibilidades diferentes que podrían estar causando el problema, por lo que es posible que desee probar uno de los hacks antes mencionados si no puede averiguar el origen del problema.

Answer 2

Puede verificar si navigator.appVersion contiene la palabra "Chrome" y establecer el posicionamiento relativo de ese botón unos pocos píxeles mediante javascript.

if (navigator.appVersion.indexOf("Chrome/") != -1) { 
// modify button 
} 

Answer 3

trate de cambiar su tipo de documento a un estricto - lo que funcione en un solo sobre todo debería funcionar de la misma en los tres principales navegadores. Principalmente.

Answer 4

Solo como referencia, a list of all possible browser specific CSS hacks. Aunque desaconsejo el uso de esos hacks, puede ser una solución rápida para su problema.

Answer 5

Tenga una mirada en http://rafael.adm.br/css_browser_selector/

pequeño archivo js que añade clases a su etiqueta de cuerpo como .webkit, .chrome, etc, que se puede utilizar tanto en su hoja de estilo.

Answer 6

Para utilizar CSS que sólo se aplicará a los navegadores Webkit (Chrome y Safari):

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #searchsubmit { height: 20px; } 
    #s { margin-top: 5px; } 
} 

Un truco feo, pero se puede trabajar para esos problemas de renderizado frustrantes.

Answer 7

Encontré este truco hace un par de semanas y parece funcionar de forma idéntica en todos los navegadores.

Crea un único gráfico que contenga tanto la barra de búsqueda como el botón de búsqueda. Conviértalo en el fondo de su formulario a través del estilo CSS. Luego ajuste tanto su entrada de texto como su botón de envío (probablemente a través de clases o ID) para tener {border: 0; fondo: transparente} y luego simplemente ajuste la altura y el ancho de los elementos del formulario para que se ajusten al diseño del fondo de su formulario. Anteriormente utilicé < input type = "image" .../> pero nunca conseguí que la alineación fuera correcta sin importar cómo la diseñara o la rellenara. Este método funciona bien después de su primer ajuste del margen, el relleno y el posicionamiento absoluto de los elementos del formulario si es necesario (puede dejar los bordes visibles durante la prueba para que pueda colocarlos correctamente).

También me resulta útil poner un {cursor: puntero;} sobre mi botón de envío de búsqueda y a veces incluso otras entradas de formulario para dar una pista visual de que se trata de un formulario que se puede enviar y se anima a las personas a hacer clic.