你可以在IE中的表格行放置一个渐变？ [英] Can you put a gradient on a table row in IE?

问题描述

当我将鼠标悬停在表格某一部分的表格行上时，我希望背景更改为线性渐变。 CSS非常简单：

pre $ tbody.row-links tr：hover {
background：... typical multi-浏览器线性渐变代码...
颜色：＃333C3E;
光标：指针;
}


在FF，Chrome和Safari中很好用，但不适用于任何版本的IE 。我知道CSS正在解析，因为颜色和光标发生了变化。我尝试将过滤器放置在普通的< tr> 标签本身上，但仍然没有任何结果。 IE只是忽略表格行上的 filter ？

我能想到的最好的方法是应用渐变当该行被徘徊时，该行的< td> s，但是当鼠标悬停在该行上时会导致可爱的闪烁。

现在我只给IE提供悬停时的纯色背景。有没有其他人尝试过这一点，并找出它？

解决方案

您可以使用类似于：

'pre> 背景：URL（数据：图像/ SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）;


for IE9

OR

  background：-ms-linear-gradient（top，#ffffff 0％，＃e5e5e5 100％）; 
  

用于IE10

图像。

When I mouse over a table row in a certain part of my table, I'd like the background to change to a linear gradient. The CSS is straightforward:

tbody.row-links tr:hover {
    background: ...typical multi-browser linear gradient code...
    color: #333C3E;
    cursor: pointer;
}

Works great in FF, Chrome, and Safari but not in any version of IE. I know the CSS is resolving because the color and cursor change. I tried placing the filter on the plain <tr> tag itself and still nothing. Does IE just ignore filter on table rows?

The best thing I can come up with is to apply the gradient to the <td>s of the row when the row is hovered, but that causes a lovely flickering while mousing about the row.

For now I'll just give IE a solid color background on hover. Has anyone else tried this and figured it out?

解决方案

You can use something like:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

for IE9

OR

background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);

for IE10

older IE only with images.

这篇关于你可以在IE中的表格行放置一个渐变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！