Ich habe eine Visitenkartenwebsite gemacht, die auch mobiltauglich (responsive) ist. Im Firefox klappt alles, aber im IE, in Edge und Chrome gibt es ein paar kleine Schönheitsfehler.

Vielleicht kann mir jemand einen Tipp geben. Hier erst mal die URL: goo.gl/NYCrbG

Fehler:

Edge und IE:
- Schon bei ca. 1440 Pixeln Fensterbreite erscheint eine horizontale Scrollbar, da ist aber kein Inhalt, den man scrollen kann/muss

Edge:
- Der Schriftzug unter dem Logo rechts (zwei Zeilen) wird irgendwann rechts aus dem Bild geschoben (kurz vor Minimalbreite des Browsers)

Chrome:
- Der Text (vCard herunterladen) ist nicht mittig unter dem Icon bzw. der Container ist einfach breiter als erwünscht. Sogar wenn ich die Breite explizit in Pixeln so angebe, wie er im Firefox automatisch ist, so bleibt er so breit.

Ich kann mir alle drei Fehler nicht erklären. Jemand von euch?

EDIT: Habe nur noch ein einziges Problem, siehe Kleine Schönheitsfehler in mobiltauglicher Website in Chrome und Edge/IE

Das Problem hinter der URL scheint aber nicht mein Problem zu sein.

EDIT:
Zumindest für das Problem

Marcus Gräfe schrieb:

Edge und IE:
- Schon bei ca. 1440 Pixeln Fensterbreite erscheint eine horizontale Scrollbar, da ist aber kein Inhalt, den man scrollen kann/muss

habe ich nun eine Lösung gefunden:
stackoverflow.com/questions/27…r-dom-element-transformed

Für die horizontale und vertikale Zentrierung hatte ich das hier gemacht:


Das muss für den IE und Edge so gemacht werden:


Die beiden anderen Probleme bleiben.

Die horizontale und vertikale Zentrierung mache ich mittlerweile ganz anders, dadurch ist das Problem erst recht erledigt.

Bzgl. des Abschneidens der rechten Seite in Edge ist mir noch folgendes aufgefallen: Sogar die vertikale Scrollbar wird abgeschnitten, d. h. die ist dann unsichtbar! Ein Bug in Edge?

Den Zentrierungsfehler in Chrome konnte ich beheben. Ich bin nicht ganz sicher, was genau der Grund war, auf jeden Fall hatte ich den Schriftzug vorher relativ positioniert (top) und dadurch griff text-align:center vmtl. nicht mehr.

Aber ich habe noch ein letztes, kleines Problem, und zwar diesmal in Firefox:

Bei vertikaler Fensterverkleinerung erscheint die vertikale Scrollbar viel zu früh. In Chrome, Edge und IE nicht. Warum macht FF das?

Das letzte verbliebene Problem scheint wohl mit der Höhenangabe (100%) zu tun haben. Denn setze ich die Höhe der gesamten Seite auf z. B. 90%, so erscheint die Scrollbar erst später.

Anscheinend berechnet Firefox den Viewport falsch. Die 100% werden wohl inkl. Teile vom Browser berechnet, z. B. der Adresszeile. Eine andere Erklärung habe ich nicht.

Ich setze den Thread nun auf erledigt, weil die Website sowieso nur temporär ist (bzw. der jetzige Inhalt) und der Fehler wirklich harmlos ist. Aber sollte noch jemand eine Lösung dafür haben, so bin ich dafür offen.

Nein, es gibt bei der Box weder margin, noch padding, noch border.

Allerdings habe ich gerade festgestellt, dass das Entfernen folgender Anweisung das Problem zu lösen scheint:


Danke!

Edit: Wobei das wohl auch keine schöne Lösung ist, denn ich will eigentlich mit border-box arbeiten...