Hover effect in tables really wierd in IE10 (Win 8 Release Preview) - hover

Question

I've recently upgraded my desktop PC to Win 8 Release Preview. Before I used the Consumer Preview, and I really like both of them to be honest.
Anyways, in Consumer Preview I had no problems with the websites I was making. Everything worked as it should in IE10, IE9, Chrome, Firefox, Safari. It all looked pretty much the same, except for the small differences each browser have. So all in all, no problem.
But after I upgraded to Release Preview, and therefor a new version of IE10, some stuff on the same sites I was working on in Consumer Preview didn't behave as it should.
What I'm talking about is a hover effect on in some tables I have.
The CSS for the tables is just a plain table, and whenever I move my mouse over one of the rows, a hover effect is presented.
CSS for the hover is:
table.Green tr:not(:first-child):hover {
background:#dddddd; /* Old browsers */
background:-webkit-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:-moz-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:-o-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:-ms-linear-gradient(top, #FFFFFF 0%, #dddddd 100%);
background:linear-gradient(top, #FFFFFF 0%, #dddddd 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF ', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
Nothing fancy. The first row, which have the headers of the columns should not be affected by this, but every other row should.
And as I said, this worked perfectly in the recent IE10, and all other browsers. But not in the new IE10.
I've attached an image so you can see what I mean (Working in Chrome, not working in IE10 Release Preview):
As you can see, the first picture, there are only to cells that are affected by the mild gradient (Which both contains links. The Customer name and the little icon under Deal), and in the 2nd Picture, the entire row is affected by the gradient.
I don't know why. But only the cells where there is some form of actual link it will show the hover effect, and sometimes it even have problem responding to the mouseover effect. So some rows will get the hover effect, but other rows, in the same table, will not, even though there is the excact same content in every row. It's like it's very random which row it wants to activate :/
So, is this something I should ignore, and hope that will get fixed by Microsoft, or is it an essential flaw in my HTML/CSS that suddenly appears in IE10 Release Preview only ?
Hope someone could help me with this :)
Thanks in advance
Regards

Answer 1

The unprefixed linear-gradient syntax is not the same as it used to be in prefixed modes.
See:
https://developer.mozilla.org/en/CSS/linear-gradient
http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx
A quote from the second link:
What It Means For Your Code CSS gradients
While broadly interoperable, the prefixed gradient syntax supported by
all modern browsers reflects a now obsolete draft version of the
specification. This earlier syntax is incompatible with the current
Candidate Recommendation. For example, if you have declared the
following gradient:
background: -ms-linear-gradient(left, yellow, red);
Then producing the unprefixed equivalent is not simply a matter of
removing the ‑ms‑ prefix. Because IE10's unprefixed linear gradient
function conforms to the latest specification, it should become:
background: linear-gradient(to right, yellow, red);
A future blog post will cover IE10’s support for CSS gradients in more
detail.
In your case, you should change in background:linear-gradient(top ... instead of top, use to bottom.