Ankündigung

Einklappen
Keine Ankündigung bisher.

Chrome verschluckt rechte Table-Border

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Chrome verschluckt rechte Table-Border

    Moin!

    Ich habe ein Problem mit dem Chrome-Browser:

    Dieser verschluckt die rechte Table-Border meiner Tabelle.

    Die Tabelle befindet sich innerhalb eines leeren Flexbox-Divs, das als Container dazu dient, dass mir die Browser im Falle eines (horizontalen) Overflows nicht das Padding ignorieren, was auch super funktioniert.

    Entferne ich den Container oder die Anweisung Overflow-Auto für die Tabelle, stellt Chrome das Ganze genauso normal wie jeder der anderen Browser auch dar.

    Belasse ich es jedoch beim Container und dem Overflow-Auto, fehlt rechts der eine Pixel, das Ganze tritt nur im Chrome auf.

    Weiß da jemand Abhilfe?


  • #2
    Hast du einen Link wo man sich das mal ansehen kann.

    Kommentar


    • #3
      Habe es dir einmal rudimentär in einem Fiddle nachgebaut, es zeigt im Chrome genau das von mir beschriebene Verhalten:

      https://jsfiddle.net/ohv0ofva/1/

      Kommentar


      • #4
        Bei mir nicht, habe aber auch kein original Chrome, verwende stattdessen Iron, kenne aber solche Probleme aufgrund von Rundungsfehlern oder Padding.

        Es hat sich aber als gute Praxis erwiesen, das Box-Modell umzustellen.
        An erster Stelle im CSS Code folgendes einfügen:
        HTML-Code:
                html {
                    box-sizing: border-box;
                }
                *, *:before, *:after {
                    box-sizing: inherit;
                }
        Geht es damit?

        Lesestoff:
        https://www.paulirish.com/2012/box-s...order-box-ftw/
        https://wiki.selfhtml.org/wiki/CSS/Box-Modell

        Kommentar


        • #5
          Dank dir für deine Antwort, aber daran liegt es nicht - ich verwende natürlich das Box-Modell, habe es lediglich beim Nachbau des Fiddles nicht berücksichtigt.

          Kommentar


          • #6
            Und wenn du im section das padding raus nimmst und stattdessen im div margin: 16px hinzufügst?

            Kommentar


            • #7
              Das hatte auch keinen Erfolg.

              Den Tabellen-Container als Flexbox zu deklarieren hatte ihn gestört - wenn ich diese Anweisung rausnehme, läuft es wie gewünscht und auch die ursprüngliche Absicht, das Verhindern des Auffressens des Paddings, funktioniert immer noch.

              Kommentar


              • #8
                Mit der 62er Chrome Version zeigte das obige Fiddle noch Fehler (das untere Border fehlte + das rechte beim Scroll). Nach Aktualisierung auf die 63er Version sieht alles ok aus.
                PHP-Klassen auf github

                Kommentar


                • #9
                  https://jsfiddle.net/mf5rd7Lj/

                  Kommentar

                  Lädt...
                  X