CSS: Relleno tema. ¿Necesita ayuda por favor
https://stackoverflow.com/questions/3702732
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy experimentando una extraña CSS espaciamiento tema en Chrome (pero no en Firefox y / o IE)
El espaciamiento vertical en Firefox entre el " Búsqueda de inmobiliarias " (etiqueta H2) y el campo de formulario de entrada para " San Francisco, CA " (ciudad-campo # etiqueta de entrada) es perfecto, pero en Chrome, Chrome está aplicando más espaciado / Extra vertical que se desee.
Para ayuda, he adjuntado una captura de pantalla. La línea roja representa el espacio extra que Chrome está añadiendo que Firefox / IE no lo son.
Cualquier idea por qué Chrome es aplicar más espaciado que Firefox y IE.
Y cómo solucionar este problema.
Gracias de antemano
Actualizar
También estoy usando una "hoja de estilos de reset" para estandarizar en todos los navegadores la distancia H2, etc. Se puede encontrar en mi documento HTML vinculado anteriormente y aún así estoy experimentando este problema.
Solución
Estoy pensando que la línea de altura es el culpable. Intente configurar la altura de la línea de la h2 a alguna parte alrededor de 13 a 15 píxeles. Por defecto está configurado a la normalidad. Según W3C , line-height: normal " Indica a los agentes de usuario para establecer el valor usado para un valor "razonable" en base a la fuente del elemento ". Firefox y Chrome podría ser el establecimiento de valores "razonables" diferentes, ya que se basan en motores de renderizado completamente diferentes.
Otros consejos
Usar una hoja de estilos de reset.
Los diferentes navegadores interpretan las reglas CSS para las etiquetas como H1, H2, UL, LI, etc. de diferentes maneras. Estos incluyen el relleno y el tamaño de fuente por defecto. Una hoja de estilo de reinicio toma todos aquellos y elimina los valores predeterminados para que puedan sustituir sus propios valores cuando así lo desea.
Trate de establecer la conveniencia de height #city-field, digamos, a 20 píxeles.
embargo .
De acuerdo con el inspector web, en Chrome, su etiqueta de entrada tiene una parte superior y margen inferior 2px. Sin embargo, Firebug muestra ningún margen para esta misma entrada, en Firefox. Utilice el siguiente en tu CSS:
#city-field {margin:0}
Editar: El espacio extra está siendo causado porque la entrada se establece en display: inline-block. Si lo cambia a display: block, se dará cuenta de que desaparece el espacio. Trate de usar flotadores y pantalla:. Bloque para obtener el contenido en línea en lugar
