Obramowania niewyświetlane w Firefoksie ze zwinięciem obramowania w tabeli, pozycją: względną w treści lub kolorem tła w komórce

83

Rozważ następujący kod HTML:

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
Rozwiń fragment

Zwróć uwagę, że ostatnia komórka ma lewe i prawe obramowanie w stylu wbudowanym. Ty (a przynajmniej ja) spodziewałbym się, że to będzie widoczne. W IE tak jest. Ale w Firefoksie (6) tak nie jest. Możesz rozwiązać ten problem poprzez:

  • Usuwanie pozycji względem div.datagrid table tbodyw CSS
  • Zmiana div.datagrid table tbodyna div.datagrid tablew CSS
  • Usuwanie background-coloron table.data td.priceCellw CSS
  • Usuwanie border-collapseon div.datagrid tablew CSS

To jest uproszczona wersja naszego kodu; rozwiązaliśmy go również (wybierając opcję 2). Ale zastanawiam się nad tym:

  • Czy to błąd w Firefoksie?
  • Czy to błąd w IE?

A w szczególności: z jakiego powodu Firefox nie pokazywał granic, gdy CSS jest taki, jaki jest?

css firefox border Piotr
źródło
Nie pytaj mnie dlaczego, ale kiedy przeniosłem tę border-collapsewłaściwość z pliku CSS div.datagrid tabledo table.datasamego siebie w powyższym CSS, wszystko działało dobrze. Może jest tu ktoś inny, kto może wyjaśnić ... (korzystam z Firefoksa 5)
kompost
1
Nie mam odpowiedzi na Twoje pytanie. Podejrzewam, że to błąd, ponieważ względne pozycjonowanie nie powinno wpływać na obramowania, ale zrobiłem uproszczony przypadek testowy i wszystkie 4 przeglądarki wyświetlały go inaczej! (Fx6, Op 11.50, IE8, Chrome 15) Przypadek testowy tutaj: jsfiddle.net/76Qb7/9
Doug,
Właśnie natknąłem się na ten problem… zabawne, że błąd Firefoksa utrzymuje się przez taki okres czasu.
GDY,

Odpowiedzi:

64

Dla mnie wygląda to na błąd Firefoksa. Tła malują się na granicach; możesz to zobaczyć, jeśli użyjesz półprzezroczystego koloru tła.

Złożyłem https://bugzilla.mozilla.org/show_bug.cgi?id=688556

Boris Zbarsky
źródło
2
Pobiegłem w tym samym numerze. Nadal nie jest to naprawiane przez przeglądarkę Firefox. Wygląda na to, że nie traktują tego wystarczająco poważnie, podczas gdy jest to duży problem projektowy, gdy używa się selektora: nth-child (nieparzyste), aby dodać tło tylko do nieparzystych wierszy. Ja też potrzebuję granicy, żeby była idealna. Dziękuję za zgłoszenie błędu!
Jelmer
FYI, nadal aktualne 9 lat później.
Charles Merriam
182

Właśnie natknąłem się na ten problem i doszedłem do rozwiązania tylko dla CSS: po prostu dodaj background-clip: padding-boxdo swojego tdelementu.

Zobacz ten artykuł, aby uzyskać więcej informacji: https://developer.mozilla.org/en-US/docs/CSS/background-clip

medoingthings
źródło
2
Huh, nie rozumiem. Dokumenty mówią, że określa, czy tło rozciąga się poniżej obramowania. Mam wrażenie, że jest renderowany na górnej krawędzi.
Peter
2
Najlepsze rozwiązanie CSS, jakie znalazłem. Dzięki za udostępnienie @medoingthings
helpse
14

Wystarczy umieścić wszystko w jednym miejscu.

Problem pojawia się, gdy masz komórkę ze względną pozycją wewnątrz tabeli ze zwiniętymi krawędziami (jak wskazał Boris i wypełnił błąd https://bugzilla.mozilla.org/show_bug.cgi?id=688556 )

Można to łatwo rozwiązać za pomocą CSS, jak wskazał user2342963 (Dodanie background-clip: padding-box do komórki).

Możesz zobaczyć problem (z Firefoksem) i poprawkę tutaj: http://jsfiddle.net/ramiro_conductiva/XgeAS/

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
Ramiro Sánchez
źródło
2
Działa to w celu naprawienia błędu w FF, ale w IE jest brzydka biała ramka wewnątrz zwykłej ramki, jak to naprawić?
Tony Brix
9

Jest to błąd w przeglądarce Firefox i miejmy nadzieję, że wkrótce go naprawią. Ale w międzyczasie udało mi się rozwiązać ten problem, ustawiając moje tdkomórki na position: static. Mam nadzieję, że to pomoże komuś innemu.

td {
    position: static;
}
smitt04
źródło
3
Jeśli używasz pseudoelementów takich jak ::beforelub ::afterna tym samym td, position: staticpsuje te style. background-clip: padding-boxjest bezpieczniejszy.
Sebsemillia
3

Innym możliwym rozwiązaniem jest poprawienie błędów colspan w znacznikach tabeli.

Najwyraźniej błędy colspan mogą powodować te same efekty z ukrytymi krawędziami podczas używania border-collapse: collapse;

Zostałem skierowany do właściwego rozwiązania przez http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html .

W mojej tabeli napisałem <th colspan = "9">, gdy było tylko 8 kolumn.

To spowodowało błąd (ukryta prawa krawędź) w programie

  • Chrome 51.0.2704.103 m (64-bitowy)
  • Vivaldi 1.2.490.43 () (32-bitowy)

ale renderowane z właściwymi granicami w

  • Firefox 44.0.2
  • IE 11 (11.420.10586.0)
  • Edge 25.10586.0.0
pekaaw
źródło
1
Usunięcie border-collapse: collapse from table element pomogło nam
Jarno Argillander
Najwyraźniej wyzwalają to również inne błędy składniowe. Biorąc pod uwagę radę @ pekaaw, sprawdziłem mój HTML i stwierdziłem, że mam to, co <thead>chciałem </thead>. Naprawienie tej literówki rozwiązało problem z granicami!
davidreedernst
1

Najlepszym sposobem rozwiązania tego problemu jest zrobienie czegoś takiego.

Zwróć uwagę na właściwości position: względne w elementach „thead” i „tbody”, te są ważne. Podobnie jak właściwości border-collapse i background-clip. Działa z kolorem tła we wszystkich i naprzemiennych wierszach.

table {
  width: 100% !important;
  border-spacing: 0;
  border-collapse: unset !important;

  thead {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      th {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }

  tbody {
    position: relative;
    left: -1px;
    top: -1px;

    tr {
      &:last-child {
        td {
          border-bottom: 1px solid #737373!important;
        }
      }

      td {
        background-clip: padding-box;
        border-top: 1px solid #737373!important;
        border-left: 1px solid #737373!important;
        border-right: none !important;
        border-bottom: none !important;

        &:last-child {
          border-right: 1px solid #737373!important;
        }
      }
    }
  }
}
Mike Dinder
źródło
0

Dodanie innego rozwiązania tego (starego) problemu: Przydarzyło mi się to dzisiaj, ponieważ mam dość skomplikowaną tabelę z wieloma osobami. Jedynym problemem było to, że miałem otwarty tag tbody, który nie był zamknięty. Usunąłem ten tag i obramowania pojawiły się ponownie, bez konieczności zmiany czegokolwiek w moim CSS. Aby wyjaśnić, moja struktura wyglądała mniej więcej tak:

<table>
  <thead>
    <tr><th>Col1</th><th>Col2</th></tr>
  </thead>
  <tbody>
  <tbody>
    <tr><td>Val1</td><td>Val2</td></tr>
    <tr><td>Val3</td><td>Val4</td></tr>
  </tbody>
</table>
Rozwiń fragment

Katz
źródło