Webkit (Safari и Chrome) с нулевой шириной и только нижней границей отображается шириной 1 пикселя - PullRequest
Новая
       17

Webkit (Safari и Chrome) с нулевой шириной и только нижней границей отображается шириной 1 пикселя

4 голосов
/ 23 апреля 2011

Моя проблема проста для объяснения, но Webkit трудно решить. Пожалуйста, прочитайте ниже:

У меня есть простая таблица с одной строкой и двумя ячейками , но в Safari / Chrome таблица все равно отображается иначе, чем в IE / Firefox .

Первая ячейка в единственном ряду таблицы содержит элемент div шириной 150px с синей рамкой 1px. Вторая ячейка в той же строке имеет красную только нижнюю границу шириной 25px и содержит div, который имеет 0px ширину и не имеет границы.

См. Пример на http://www.livenetlife.com/Tabletest.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div style="border: 1px solid blue; width:150px; height:50px;"></div>
                </td>
                <td style="border-left: 0px; border-right:0px; border-top:0px; border-bottom: 25px solid red;">
                    <div style="width:0px; height:0px;"></div>
                </td>
            </tr>
        </table>

    </body>
</html>

В Firefox и IE вторая ячейка не отображается , поскольку она имеет ширину 0 пикселей. Проверьте, открыв ссылку выше с Firefox или IE, и все, что вы заметите, это один синий прямоугольник (div в первой ячейке).

Но в браузерах Webkit (Safari и Chrome) вторая ячейка отображается тоже , потому что она таинственно шириной в 1 пиксель. Откройте ссылку выше с помощью Safari или Chrome, и вы заметите вертикальная красная линия (нижняя граница второй ячейки шириной 25 пикселей) отображается рядом с синим прямоугольником.

Какой CSS Webkit мне не хватает, чтобы вторая ячейка исчезла также в Safari и Chrome?

Любой совет был бы действительно признателен.

PS: Обратите внимание, что приведенная выше таблица на самом деле является упрощением реальной проблемы, описанной здесь . Поэтому модификация HTML невозможна. Пожалуйста, попробуйте помочь мне найти a (Webkit) CSS решение для указанной проблемы.

Ответы [ 3 ]

1 голос
/ 23 апреля 2011

Это определенно ошибка в WebKit, кажется уже известной: https://bugs.webkit.org/show_bug.cgi?id=39381

Использовать отображение: нет для этой ячейки.

0 голосов
/ 19 августа 2014

3 + года спустя, и похоже, что эта ошибка все еще не исправлена ​​в Chrome 36.

Один из способов решения проблемы в этом конкретном примере - добавить правое поле -1px и относительное позиционированиев div в первой ячейке, вот так: 

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div style="position: relative; margin-right: -1px; border: 1px solid blue; width: 150px; height: 50px;"></div>
    </td>
    <td style="border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 25px solid red;">
      <div style="width: 0px; height: 0px;"></div>
    </td>
  </tr>
</table>
0 голосов
/ 18 августа 2011

Вы можете использовать display: inline; во 2-й td таблицы.Вот ваш код с моими изменениями. 

<table cellpadding="0" cellspacing="0">
        <tbody><tr>
            <td>
                <div style="border: 1px solid blue; width:150px; height:50px;"></div>
            </td>
            <td style="border-left: 0px; border-right:0px; border-top:0px; border-bottom: 25px solid red; display: inline;">
                <div style="width:0px; height:0px;"></div>
            </td>
        </tr>
    </tbody></table>
...