Mi página tiene este relleno extra en la parte superior de la página que no puedo eliminar. Intenté todo bajo el sol y espero que alguien pueda mostrarme el camino.Relleno adicional en Chrome/Safari/Webkit: ¿alguna idea?
¿Alguna idea?
Su página tiene un elemento cerca de la parte superior con un margen superior que se extiende fuera del contenedor de la página. Si usted tiene esto:
<div class="wrapper" style="margin: 0">
<div class="section" style="margin: 40px 0"> Stuff! </div>
</div>
A continuación, el elemento de .section se posicionará en la parte superior de la .wrapper y su margen de 40px se extenderá por la parte superior. Esto tiene que ver con la forma en que los márgenes se colapsan para que no se acumulen dos márgenes entre los elementos. Puede evitar esto agregando overflow: hidden en el contenedor.
En su marcado, es el elemento .mini-search que tiene un margen superior de 40px. Elimine este margen o agregue overflow: hidden en el campo que lo contiene.
HOORAY - ¡te lo he dado! quitó ese maldito margen de .mini-search y lo reposicionó a través de relleno ahora estoy listo para ir. ¡¡¡muchas gracias!!! – pepe
HOORAY - ¡Andrew, lo has clavado! ahora estoy listo para ir. ¡¡¡muchas gracias!!! –
soy capaz de solucionarlo mediante la eliminación de la regla:
* { padding: 0 }
Desde el CSS. No estoy seguro de lo que está rompiendo, pero esa es la causa.
Puedo confirmar que esto funciona, pero tampoco tengo idea de por qué. Usando el visor DOM incorporado de Chrome, puede ver que toda la etiqueta
parece estar desplazada hacia abajo, no solo el encabezado. Muy extraño. –Así que lo que recomendaría aquí es simplemente usar Restablecimiento CSS de Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ en lugar de "* {margen: 0; relleno: 0 } ". HTH –
thx eric: también lo noté, pero no pude arreglarlo por medio de css, pero andrew encontró la línea ofensiva y ahora estoy bien, gracias por el comentario – pepe
Deseo que hayan hecho:
body {padding :0; margin:0}
por defecto el cuerpo de la etiqueta tiene un acolchado.
agregar esta línea a mi css no hizo ninguna diferencia - thx para el comentario walter – pepe
Eso es lo que necesitaba, gracias :) – Laser
buena información resolvió mi problema gracias – BigPenguin
utilizar el código CSS:
/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}
El tema que comentas es porque el estilo de agente de usuario, me entero de ello inspeccionar el cuerpo de la etiqueta con la herramienta navegador. Debe rastrear los estilos de elemento en un navegador utilizando las herramientas que proporciona (ahora todos los importadores incluyen un inspector DOM) para que pueda desmitificar el comportamiento no estándar.
Sé que no lo pide, pero hablando de productos WebKit, pego un código para obtener bordes redondeados en cada navegador, excepto IE.
.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}
thx horacio - desafortunadamente esto no funcionó – pepe
Siempre incluya el archivo YUI reset css.
y: body, html {padding: 0; margin:0} eso es todo!
omar, este tampoco lo hizo trabajo - agregó la línea que recomienda pero no cambia - thx aunque – pepe
La hoja de estilos WebKit contiene lo siguiente: 'margen' y las propiedades 'padding':
-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:
-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:
Disfrute
No funciona en mi caso. – starikovs
Es, en mi opinión, causada por un elemento EMBED añadió por algún complemento justo después de la etiqueta HTML de apertura * (marque "clic derecho> inspeccionar elemento" para ver si realmente está allí).Si es así, hay básicamente dos opciones a seguir:
embed{display:none} en tu hoja de estilos.* Este fue mi caso - el plugin llamado por defecto plug-in y ambos deshabilitar & eliminación ayudado a resolver el problema.
Comentario no constructivo: usted ** seguro ** do ** love ** usando ** bold **. =) – Jesse
Um, solo quería señalar la información más importante para que aquellos que no tienen ganas de leerlo todo puedan entenderlo. :)) – Kaja
Está bien, eventualmente aprenderá (al menos llegué a esta conclusión) que está publicando para ayudar a otros, no para atraer la atención a su respuesta. Aquellos que necesitan ayuda * leerán * su publicación completa. Por otro lado, si está publicando una pregunta, puede ser útil resaltar las ** partes más importantes **. – Jesse
Esto funciona con IE (al menos IE v10 en mis pruebas):
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
La de abajo es el que funciona para IE 10, simplemente mantiene todas las dimensiones de lo que se propuso un selector/elemento estar en el ancho y/o alto
Tuve el mismo problema con mi navegador que tiene un relleno y contiene botones. Overflow:hidden funcionó, pero también cortó los botones, porque tenían un relleno que cruzaba el borde de la altura de los navegadores. Así que probé overflow:visible y funcionó bien para mí.
siempre use css reset para minimizar las diferencias en el navegador – takien
Veo un poco de relleno extra no en la parte superior sino en los laterales, tanto en Chrome como en Safari, aunque es un poco más pronunciado en Chrome. –
pregunta es inútil sin muestra de código, se utiliza para contener un enlace, pero este se elimina! –