1

我最近将我的台式电脑升级到了 Win 8 Release Preview。在我使用消费者预览版之前，老实说，我真的很喜欢他们两个。

无论如何，在消费者预览版中，我制作的网站没有任何问题。在 IE10、IE9、Chrome、Firefox、Safari 中一切正常。除了每个浏览器的细微差别之外，一切看起来都差不多。所以总的来说，没有问题。

但是在我升级到 Release Preview 并因此升级到新版本的 IE10 之后，我在 Consumer Preview 中工作的同一站点上的某些内容并没有表现出应有的行为。我所说的是在我拥有的某些表格中的悬停效果。

表格的 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 Release Preview 中不工作）：

IE10 发布预览

铬合金

如您所见，第一张图片只有受温和渐变影响的单元格（其中都包含链接。客户名称和 Deal 下的小图标），而在第二张图片中，整行都受到影响梯度。

我不知道为什么。但只有存在某种形式的实际链接的单元格才会显示悬停效果，有时甚至无法响应鼠标悬停效果。所以有些行会获得悬停效果，但同一个表中的其他行不会，即使每一行都有完全相同的内容。就像它想要激活哪一行是非常随机的：/

那么，这是我应该忽略的东西，并希望微软能修复它，还是我的 HTML/CSS 中的一个基本缺陷突然出现在 IE10 Release Preview 中？

希望有人可以帮助我:)

提前致谢

问候

4

1 回答 1

0

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

看：

第二个链接的引用：

对您的代码意味着什么 CSS 渐变

尽管具有广泛的互操作性，但所有现代浏览器都支持的前缀渐变语法反映了该规范的现已过时的草案版本。这种较早的语法与当前的候选推荐不兼容。例如，如果您声明了以下渐变：

背景：-ms-linear-gradient（左，黄色，红色）；

那么产生无前缀的等价物不仅仅是删除 -ms- 前缀的问题。因为IE10的无前缀线性渐变函数符合最新规范，所以应该变成：

背景：线性渐变（向右，黄色，红色）；

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

在您的情况下，您应该更改background:linear-gradient(top... 而不是top, 使用to bottom.

于 2012-07-10T08:52:31.913 回答