Как показать границы элементов с градиентной заливкой в ​​IE9? - PullRequest
Новая
       72

Как показать границы элементов с градиентной заливкой в ​​IE9?

4 голосов
/ 06 июля 2011

Я хочу, чтобы ячейки заголовка таблицы имели определенный цвет границы и градиентную заливку. Я хочу, чтобы это выглядело так:

enter image description here

Вот HTML для выше: 

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Column00</th>
                <th>Column01</th>
                <th>Column02</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Feline</td>
                <td>Cat</td>
                <td>Felidae</td>
            </tr>
            <tr>
                <td>Canine</td>
                <td>Dog</td>
                <td>Caninae</td>
            </tr>
            <tr>
                <td>Primate</td>
                <td>Ape</td>
                <td>Primates</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

А вот и CSS: 

table{
    border-collapse: collapse;
}

th{
    border: 3px #449944 solid;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#44bb44'); /* IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#44bb44)); /* Chrome */
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(85,205,85, 1));
}

Он отлично отображается в Chrome 12 и Firefox 5, но в IE 9 это выглядит так:

enter image description here

Похоже, IE9 помещает градиентную заливку поверх границ. Как мне заставить IE9 отображать границы элементов TH "сверху"?

ТИА.

Ответы [ 3 ]

1 голос
/ 12 июля 2011

Кажется, это хорошо известная ошибка (?) В IE9: градиентные фоны "переполняют" границы . Это особенно заметно, когда используются закругленные углы с градиентными заливками (они отлично отображаются в Chrome и FF, но в IE градиентные заливки простираются за пределы закругленных углов). См. Ответ на этот вопрос SO: IE9 границы-радиус и фоновый градиент кровотечения .

Самым простым решением на данный момент является использование хорошего старого фонового изображения градиентной заливки, повторяемой в направлении X для IE, например: 

table{
    border-collapse: collapse;
}

th{
    border: 3px #449944 solid;
    background-image: url('greenGradient.png');
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#44bb44)); /* Chrome */
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(85,205,85, 1));
}

Затем IE ведет себя и отображает границы «сверху», а фоновая заливка остается внутри границ, как и следовало ожидать.

1 голос
/ 05 марта 2013

http://msdn.microsoft.com/en-us/library/ie/jj127314(v=vs.85).aspx

"поле отступа: фон закрашивается внутри (обрезается) окна отступа."Установка свойства фонового клипа на вашем TH в "padding-box" должна помочь вам

0 голосов
/ 06 июля 2011

это бордюр-коллапс на элементе TABLE, затем border-width ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...