td中添加悬浮框（层）颜色渐变 ie10不支持filter

来源：互联网发布：淘宝店铺页头怎么做编辑：程序博客网时间：2024/05/20 09:46

背景：<td>使用overflow:hidden样式，使得内容显示不完整，如图。

需要使用悬浮框，hover的时候，悬浮框内显示完整内容。悬浮框样式要求：颜色渐变。如图：

先随便弄点页面基础元素的代码供测试：

<!DOCTYPE html><html><head><style>table{table-layout:fixed;border:2px solid red;width:300px;}table tr td{width:100px;border:2px solid blue;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;}</style></head><body><table><tr>  <td>if i could steal this moment forever<br>你是我的小呀小苹果<br>ie10下，颜色渐变居然不能用filter滤镜</td>  <td>Smith</td>  <td>50</td></tr><tr>  <td>Eve</td>  <td>Jackson</td>  <td>94</td></tr><tr>  <td>John</td>  <td>Doe</td>  <td>80</td></tr></table></body></html>

开始添加悬浮框（层）：这里注意悬浮框要相对td的位置变动。在td里面增加div悬浮层，如果不去掉td原有的overflow:hidden样式，那么悬浮div也是不能显示完整的。z-index这时候也没有作用。所以覆盖掉overflow:hidden，把td中原有内容放入一个样式设置为overflow:hidden的内容div里面。更改如下，其中悬浮div为showCell。

<tr>  <td style="overflow:visible;" onMouseOver="javascript:showContent(this)"><div id='beforeShow'><div id='showCell'></div><div id='content'>if i could steal this moment forever<br>你是我的小呀小苹果<br>ie10下，颜色渐变居然不能用filter滤镜</div></div></td>  <td>Smith</td>  <td>50</td></tr>

script脚本为：

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script><script>function showContent(content){var temp = $(content).children().find('#content').html();$("#showCell").html(temp);}</script>

这里吐槽一句：以前引用jqeury，一般有<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>这个资源。现在这个已经不能引用了。大家懂得。

div对应的样式：

<style>#beforeShow {position:relative; }  #beforeShow:hover{  background:none;}  #beforeShow  #showCell{display: none;  }  #beforeShow:hover #showCell{font-size: 9pt;display:block;position:absolute;  top:28px;  left:30px;  border: solid 1px;border-color: gray;border-radius: 6px;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffee00,endColorStr=#ffeeff);/*不支持ie10及以上版本*/background:-moz-linear-gradient(top,#ffee00,#e0e0e0);/*火狐*/background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffee00), to(#ffeeff));/*谷歌*/background: -o-linear-gradient(top,#ffffff, #e0e0e0);/*opera*/background-image:-ms-linear-gradient(top,#ffffff,#e0e0e0);/*for ie 10!!!!!!*/padding: 3px;  }#content{overflow: hidden;text-overflow: ellipsis;}</style>

特别注意：ie10下面的颜色渐变，用的是background-image:-ms-linear-gradient(top,#ffffff,#e0e0e0); 使用ie的F12开发人员选项打开，发现其不认识filter，如图：

奇葩问题！吐槽：我又不是前端开发人员。这是什么坑爹现象，什么原因！坑哥啊。无力吐槽ing。

0 0

td中添加悬浮框（层） 颜色渐变 ie10不支持filter

td中添加悬浮框（层）颜色渐变 ie10不支持filter