IE10中表格中的悬停效应(Win 8发布预览)

Question

我最近升级了我的桌面电脑，以赢得8版预览。在我使用“消费者预览”之前，我真的很希望他们两个都诚实。

无论如何，在“消费者预览”中，我对我正在制作的网站没有任何问题。在IE10、IE9、Chrome、Firefox、Safari中，一切都正常工作。除了每个浏览器都有很小的差异外，所有这些看起来都是一样的。所以总的来说，没问题。

但是，在我升级到发布预览版之后，对于一个新版本的IE10，我在“消费者预览”中工作的网站上的一些东西并没有表现出应有的效果。我说的是我在一些桌子上的悬停效应。

这些表的CSS只是一个普通的表，每当我将鼠标移动到其中一行时，就会出现悬停效果。

悬停的CSS是：

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 */
}

没什么花哨的。具有列的标题的第一行不应受此影响，但其他每一行都应受此影响。正如我所说，这在最近的IE10和所有其他浏览器中都非常有效。但不是在新的IE10中。

我附上了一张图片，这样您就可以理解我的意思(在Chrome中工作，在IE10发布预览版中不起作用)：

​

​

​

​

如您所见，第一张图片中，只有受轻微渐变影响的单元格(这两者都包含链接)。客户名称和交易中的小图标)，在第二张图片中，整个行受到渐变的影响。

我也不知道原因。但是只有有某种形式的实际链接的单元才会显示悬停效应，有时甚至会出现响应鼠标翻转效应的问题。因此，某些行将产生悬停效应，但在同一表中的其他行则不会，即使每行的内容相同。好像它要激活的行是非常随机的:/

那么，这是我应该忽略的东西，并希望微软能够解决，还是我的IE10 /CSS中的一个重要缺陷突然出现在发布预览中？

希望有人能帮我这个忙:)

提前感谢

问候

Answer 1

无前缀的linear-gradient语法与以前在前缀模式下的语法不同。

请参见：

• 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

引用第二个链接的话：

对您的代码CSS梯度意味着什么

虽然具有广泛的互操作性，但所有现代浏览器支持的前缀渐变语法反映了该规范现已过时的草案版本。此早期语法与当前候选建议不兼容。例如，如果您声明了以下梯度：

背景：-ms-linear-gradient(left，黄、红)；

那么，产生无前缀的等价物并不仅仅是去掉-ms-前缀的问题。由于IE10的无前缀线性梯度函数符合最新规范，它应该成为：

背景：线性梯度(右，黄色，红色)；

未来的一篇博客文章将更详细地介绍IE10对CSS渐变的支持。

在你的情况下，你应该改变background:linear-gradient(top .不要使用top，而是使用to bottom。