Почему в моей ячейке таблицы есть тонкая вертикальная линия только в IE9? - PullRequest
Новая
       19

Почему в моей ячейке таблицы есть тонкая вертикальная линия только в IE9?

1 голос
/ 23 сентября 2011

Вот мой тестовый код: 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        table
        {
            border-collapse: collapse;              
        }
        td
        {
            background-color: gray;             
        }
        td.first
        {
            -webkit-border-bottom-left-radius: 10px;
            -moz-border-radius-bottomleft: 10px;
            border-bottom-left-radius: 10px;
            width: 100px;               
        }
        td.second
        {
            -webkit-border-bottom-right-radius: 10px;
            -moz-border-radius-bottomright: 10px;
            border-bottom-right-radius: 10px;               
            width: 100px;
        }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr>                    
                <td>Column 1</td>
                <td>Column 2</td>                       
                <td>Column 3</td>                       
                <td>Column 4</td>                       
            </tr>           
            <tr>                    
                <td class="first"></td>
                <td class="second" colspan="3">Column 2</td>                        
            </tr>
        </tbody>
    </table>
</body>

Это происходит только в IE9. Если я добавлю некоторые отступы, удалим радиус границы в td.second или добавим ячейку и изменим colspan, он исчезнет (для этого примера в любом случае). У меня есть другой проект, в котором сделать то же самое невозможно или просто не работает.

Что вызывает это, и есть ли какой-то волшебный CSS, который я могу использовать, который может исправить это для IE9 и не сломать и другие браузеры?

1 Ответ

1 голос
/ 23 сентября 2011

Немного поигрался с этим, и я должен подтвердить вывод тридцатки, что это ошибка дисплея.Если вы достанете colspan или измените второй ряд на: 

<tr>                    
    <td class="first">X</td>
    <td colspan="2">Column 2</td>
    <td class="second">&nbsp;</td>                        
</tr>

Тогда больше не будет строки.Возможно, что-то связано с неправильным рендерингом углового радиуса, поскольку это новая функция для IE.

...