Исчезающие границы ячеек таблицы CSS в браузерах на основе Gecko

Question

У меня есть очень специфическая HTML-конструкция таблицы, которая, кажется, обнаруживает ошибку Gecko.

Вот дистиллированная версия проблемы. Обратите внимание на следующую таблицу в браузере на основе геккона (например, FF): (вам придется скопировать и вставить это в новый файл)

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>          
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

В строке & отсутствует строка 3 " в правой нижней ячейке - просмотрите его в любом другом браузере, и строка отобразится, как и ожидалось. Интересно, что откажитесь от раздела thead таблицы и посмотрите, что мы получим:

<style>
table.example{
    border-collapse:collapse;
}
table.example td {
    border:1px solid red;
}
</style>
<table class="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>

        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td rowspan="2">2</td>      
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Это заставляет работать. Кто-нибудь видел это? Я полагаю, что пока я просто избавлюсь от своего раздела thead в качестве обходного пути, хотя это сделает таблицу менее доступной.

Answer 1

Странно ... определенно ошибка в рисовании. Если щелкнуть правой кнопкой мыши, чтобы контекстное меню появилось над частью того места, где должна быть строка, то при закрытии контекстного меню строка будет перерисована внизу.

Редактировать: Обходной путь - если вы поставите style="border-color: ...;" на <td rowspan="3">, вы можете отобразить границу, но она должна быть другого цвета - просто используйте тот, который максимально приближен к другие, насколько это возможно. Например, если таблица # ff0000, используйте # ff0001

Answer 2

Я также нашел эту ошибку, но она не на моем компьютере, а другая. Если после определенного разрешения я изменю размер окна браузера, строки исчезнут. как только я разверну окно, все всплывет. Вы можете исправить это навсегда, установив border-collapse: Отдельно; это дает каждому владельцу каждой клетки свою ширину. Это не то, что я хочу сделать, но это работает.

Это также может быть вызвано использованием border-collapse: collapse; затем установите выравнивание границ в 1px, а затем 0px. Поскольку он сжимает границы, он, кажется, расставляет приоритеты в 0px по ширине в 1px.

В любом случае это только Firefox, и это еще одна причина отойти от него.