webentwicklung-frage-antwort-db.com.de

Extra Füllung für Chrome/Safari/Webkit - Ideen?

Meine Seite enthält diese zusätzliche Auffüllung oben auf der Seite, die ich nicht entfernen kann. Habe alles unter der Sonne ausprobiert und hoffe, dass mir jemand den Weg zeigen kann.

Irgendwelche Ideen?

cssgoogle-chromesafaripadding
16
pepe

Ihre Seite hat oben ein Element mit einem oberen Rand, der sich außerhalb des Seiten-Wrappers befindet. Wenn Sie das haben:

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

Dann wird das .section-Element oben auf dem .wrapper positioniert und der 40px-Rand wird nach oben herausragen. Dies hängt damit zusammen, wie die Ränder zusammenfallen, so dass sich zwei Ränder zwischen Elementen nicht ansammeln. Sie können dies verhindern, indem Sie dem Wrapper overflow: hidden hinzufügen.

In Ihrem Markup hat das .mini-search-Element einen oberen Rand von 40px. Entfernen Sie entweder diesen Rand oder fügen Sie overflow: hidden dem Feldset hinzu, das ihn enthält.

8
Andrew Vit

Das WebKit-Stylesheet enthält die folgenden Eigenschaften: '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:

Genießen

11
Filipp Yanukovich

Verwenden Sie diesen CSS-Code:

/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

Das Problem, das Sie kommentieren, besteht darin, dass der Benutzeragentenstil mit dem Browser-Tool überprüft wird. Sie sollten die Elementstile in einem Navigator mithilfe der von ihm bereitgestellten Tools ermitteln (jetzt enthalten alle wichtigen Importanten einen DOM-Inspektor), um das nicht standardmäßige Verhalten zu entschlüsseln. 

Ich weiß, dass Sie nicht danach fragen, aber wenn ich über WebKit-Sachen spreche, füge ich einen Code ein, um Abgerundete Grenzen in jedem Browser außer IE zu erhalten.

.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*/
}
4
Horacio Nuñez

ich vertraue darauf, dass du getan hast:

body {padding :0; margin:0}

standardmäßig hat das Body-Tag eine Auffüllung.

3
WalterJ89

Es ist , meiner Meinung nach, verursacht durch ein EMBED-Element, das von einem Plugin direkt nach dem HTML-Eröffnungs-Tag * hinzugefügt wurde. Wenn ja, gibt es grundsätzlich zwei Möglichkeiten:

  1. deaktivieren/entfernen Sie das Plugin , das für das Hinzufügen des Elements verantwortlich ist ; (bevorzugt, da es global ist)
  2. fügen Sie embed{display:none} in Ihr Stylesheet ein.

* Dies war mein Fall - das Plugin mit dem Namen default plugin und das Deaktivieren und Entfernen von Dateien halfen, das Problem zu lösen.

1
Kaja

Ich hatte das gleiche Problem mit meinem Nav, das eine Polsterung hat und Knöpfe enthält. Overflow:hidden hat funktioniert, aber es hat auch die Knöpfe abgeschnitten, weil sie eine Polsterung hatten, die den Rand der Navigationshöhe überschritt. Also habe ich overflow:visible ausprobiert und das hat für mich gut funktioniert.

0
David Lux

Schließen Sie immer die YUI-Reset-CSS-Datei ein. 

und: body, html {padding: 0; margin:0} das ist es!

0
Omar Al-Ithawi

Dies funktioniert mit IE (zumindest IE v10 in meinen Tests):

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Die unterste ist diejenige, die für IE 10 funktioniert. Es werden nur alle Dimensionen beibehalten, für die Sie einen Selektor/ein Element als Breite und/oder Höhe festlegen.

0
Jeremy Smith

Ich kann das Problem beheben, indem ich die Regel entferne:

* { padding: 0 }

Aus Ihrem CSS. Ich bin nicht sicher, was das bricht, aber das ist die Ursache.

0
Eric Wendelin