Meine Seite hat diese zusätzliche Auffüllung oben auf der Seite, die ich nicht entfernen kann. Versucht alles unter der Sonne und hoffe, dass mir jemand den Weg zeigen kann.Zusätzliche Polsterung auf Chrome/Safari/Webkit - irgendwelche Ideen?
Irgendwelche Ideen?
Ihre Seite hat ein Element in der Nähe der Oberkante mit einem oberen Rand, der sich außerhalb Ihres Seitenwrappers erstreckt. Wenn Sie diese haben:
<div class="wrapper" style="margin: 0">
<div class="section" style="margin: 40px 0"> Stuff! </div>
</div>
Dann wird das .section Element wird an der Spitze des .wrapper und seine 40px-Marge die obere wird erstrecken positioniert werden. Dies hat damit zu tun, wie die Ränder zusammenfallen, so dass sich zwei Ränder zwischen den Elementen nicht ansammeln. Sie können dies verhindern, indem Sie overflow: hidden auf dem Wrapper hinzufügen.
In Ihrem Markup ist es das Element .mini-search, das einen oberen Rand von 40 px aufweist. Entfernen Sie diesen Rand, oder fügen Sie overflow: hidden auf dem Feld hinzu, das es enthält.
HOORAY - andrew du hast es geschafft! Ich habe diesen gottverdammten Rand von .mini-search genommen und neu positioniert. Jetzt bin ich gut dran. Danke vielmals!!! – pepe
HOORAY - Andrew, du hast es geschafft! Jetzt bin ich gut zu gehen. Danke vielmals!!! –
Ich bin in der Lage, es zu beheben, indem Sie die Regel zu entfernen:
* { padding: 0 }
Von Ihrem CSS. Ich bin mir nicht sicher, was das ist, aber das ist der Grund.
Ich kann bestätigen, dass das funktioniert, aber ich habe auch keine Ahnung warum. Mit dem integrierten DOM-Viewer von Chrome können Sie sehen, dass der gesamte Tag
nach unten verschoben ist, nicht nur der Header. Sehr eigenartig. –Also, was ich hier empfehlen würde, ist nur Eric Meyers CSS Reset verwenden: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/anstelle von "* {margin: 0; padding: 0 } ". HTH –
thx eric - das habe ich auch bemerkt, aber ich konnte es nicht über css beheben - aber andrew hat die problematische Zeile gefunden und jetzt bin ich gut - danke für den Kommentar – pepe
ich vertrauen Sie getan haben:
body {padding :0; margin:0}
standardmäßig das Body-Tag Polsterung hat.
Hinzufügen dieser Linie zu meinem css machte keinen Unterschied - thx für den Kommentar walter – pepe
Das ist, was ich brauchte, danke :) – Laser
nice info löste mein Problem danke – BigPenguin
verwendet CSS-Code:
/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}
Das Problem, das Sie kommentieren, weil der User-Agent-Stil, ich lerne über den Body-Tag mit dem Browser-Tool Inspektion. Sie sollten die Elementstile in einem Navigator mit den bereitgestellten Tools aufspüren (jetzt sind alle wichtigen Elemente mit einem DOM-Inspektor ausgestattet), damit Sie das nicht standardmäßige Verhalten entmystifizieren können.
Ich weiß, dass Sie nicht danach fragen, sondern über WebKit Zeug sprechen, ich füge einen Code für abgerundeten Grenzen auf jedem Browser außer 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 - leider hat das nicht funktioniert – pepe
Fügen Sie immer die YUI reset CSS-Datei ein.
und: body, html {padding: 0; margin:0} das ist es!
omar, diese auch nicht Arbeit - hinzugefügt die Linie, die Sie empfehlen, aber keine Änderung - thx obwohl – pepe
das Blatt WebKit Arten enthält folgende Komponenten: 'margin' und 'padding' Eigenschaften:
-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:
-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:
Es funktioniert nicht in meinem Fall. – starikovs
Es ist, meiner Meinung nach Genießen, verursacht durch ein Element EMBED hinzugefügt durch irgendein plugin gerade nach dem HTML öffnenden Umbau * (überprüfen Sie "Recht klicken> prüfen Sie Element", um zu sehen, ob es wirklich dort ist).Wenn ja, gibt es grundsätzlich zwei Möglichkeiten zu folgen:
embed{display:none} in Ihr Stylesheet ein.* Dies war mein Fall - das Plugin Standard-Plugin und beide deaktivieren & Entfernen half lösen das Problem genannt.
Unkonstruktive Kommentar: Sie ** sicher ** ** Liebe ** mit ** Fett **. =) – Jesse
Ähm, ich wollte nur auf die wichtigsten Informationen hinweisen, so dass diejenigen, die nicht Lust haben, alles zu lesen, auf den Punkt kommen. :)) – Kaja
Das ist in Ordnung, Sie werden schließlich lernen (zumindest kam ich zu dieser Schlussfolgerung), dass Sie Posten, um anderen zu helfen, nicht auf Ihre Antwort aufmerksam zu machen. Wer Hilfe braucht, wird * Ihren ganzen Beitrag lesen. Auf der anderen Seite, wenn Sie eine Frage stellen, dann kann es helfen, die ** wichtigsten Teile ** hervorzuheben. – Jesse
Dies funktioniert mit IE (mindestens IE v10 in meinen Tests):
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Der Boden ist diejenige, die für IE 10, nur hält alle Dimensionen arbeitet, was stellen Sie einen Selektor/Element in der Breite und/oder Höhe sein.
Ich hatte das gleiche Problem mit meinem Nav, das eine Auffüllung hat und Tasten enthält. Overflow:hidden hat funktioniert, aber es hat auch die Tasten ausgeschaltet, weil sie eine Polsterung hatten, die die Grenze der Navis Höhe überschritten. Also habe ich versucht overflow:visible und das hat gut für mich funktioniert.
Verwenden Sie immer css reset, um Unterschiede über den Browser zu minimieren – takien
Ich sehe ein wenig zusätzliche Polsterung nicht auf der Oberseite, sondern auf den Seiten, sowohl in Chrome und Safari, obwohl es in Chrome ein wenig ausgeprägter ist. –
Frage ist nutzlos ohne Codebeispiel, verwendet, um einen Link zu enthalten, aber das ist entfernt! –