How to show borders of th elements with gradient fills in IE9?_问答_开发者

How to show borders of th elements with gradient fills in IE9?

开发者 https://www.devze.com 2023-03-18 05:09 出处：网络

I want the header cells of a table to have a specific border color and gradient fill. I want it to look like this:

How to show borders of th elements with gradient fills in IE9?

Here is the html for the above:

<!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>

And here's the 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));
}

It displays perfectly in Chrome 12 and Firefox 5, but in IE 9 it looks like this:

How to show borders of th elements with gradient fills in IE9?

It looks like IE9 puts开发者_StackOverflow中文版 the gradient fill on top of the borders. How do I get IE9 to display the TH elements' borders "on top"?

TIA.

It seems that this is a well-known bug (?) in IE9: gradient backgrounds "overflow" borders. This is especially noticeable when one uses rounded corners with gradient fills (these display perfectly in Chrome and FF, but in IE the gradient fills stretch outside the rounded corners). See the answer to this SO question: IE9 border-radius and background gradient bleeding.

The most simple solution for the moment is to use the good ol' background image of a gradient fill repeated in the x-direction for IE, like so:

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));
}

Then IE behaves and displays borders "on top" and the background fill stays inside the borders, as one would expect.

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

"padding-box:The background is painted within (clipped to) the padding box." Setting the background clip property on your TH to "padding-box" should do the trick

it is border-collapse on TABLE element, then border-width ...