¿Cómo soluciono problemas de relleno de CSS entre Firefox y Chrome?

He estado en esto por horas.

He estado usando este excelente kit de herramientas de interfaz de usuario: http://getuikit.com y hasta ahora ha sido genial.

El problema es el estilo de mis resultados entre Chrome y Firefox. Configuré el relleno y logré este resultado en Chrome: http://www.miximages.com/html/dmV13Xw.png Como puede ver, el texto está bien alineado con el inicio de la entrada campo.

Pero en Firefox obtengo esto: http://imgur.com/hZRyakg

¡Acabo de empezar realmente, así que es frustrante encontrarse con estas cosas tan poco antes!

El marcado HTML para el bit de resultado es:

Bhutan travel advice
https://www.gov.uk/foreign-travel-advice/bhutan

Latest travel advice for Bhutan including safety and security, entry requirements, travel warnings and health.

Y el CSS que le estoy aplicando:

  #results-container { margin-top: 9px; margin-bottom: 6px; padding-left: 40px; padding-right: 160px; } 

He intentado insertar toneladas de fragmentos de SO et al, pero nada parece funcionar. También probé una variación aparentemente infinita de los restablecimientos de CSS, pero el kit de interfaz de usuario que usa se integra normalise.css de todos modos.

Es molesto porque parece una cantidad tan trivial de HTML / CSS.

Supongo que es algo que ver con las propiedades de moz / webkit CSS, pero no sabría por dónde empezar a corregir este problema.

Creo que tu error es algo más que diferencias de relleno / margen entre FF y Chrome. ¿Puedes intentar ejecutar tu sitio a través del validador w3c, http://validator.w3.org/?

A veces eso puede atrapar errores extraños causados ​​por elementos combinados o no cerrados de la mezcla.

Otra cosa que estoy notando es que los resultados parecen estar representados en el mismo lugar en ambas imágenes en relación con su logotipo. Tal vez el problema es con la longitud de entrada o algún elemento circundante?

Lo que necesitas se llama un restablecimiento de CSS. http://meyerweb.com/eric/tools/css/reset/

Esto no solucionará sus problemas (la depuración es todo lo que puede hacer en este momento), pero en el futuro debe usar un reinicio antes de comenzar y evitará tener problemas entre los navegadores (en su mayoría)

El tamaño de fuente en% puede anular la configuración de relleno. Jugar con él puede ayudar a las diferencias de relleno.

Si no te queda otra opción, puedes usar los detalles del navegador.

esto es para el cromo

 @media screen and (-webkit-min-device-pixel-ratio:0) { .example-box { width: 76.4%; } } 

esto es para mozilla

 @-moz-document url-prefix() { .example-box { width: 77.6%;} }