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

本文探讨了解决IE10浏览器中颜色渐变无法使用的问题，通过修改HTML结构和CSS样式，实现了在悬浮框内显示完整内容的功能。包括引入jQuery库，实现鼠标悬停时内容的显示，以及定制CSS样式以适应不同浏览器的兼容性需求。

背景：<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，如图：