更改TD的IE8中的背景不透明度会删除边框......？

Question

我打算制作一个JSFiddle，但结果并不正确。

我有一张桌子。当我想悬停/鼠标悬停表格单元格时，我想更改表格单元格的颜色。我想通过改变背景颜色的不透明度来做到这一点，但这种方法在IE8中产生了一些奇怪的行为。我认为这可能是由于我偶尔听到的“hasLayout”问题，但我似乎无法设置hasLayout属性（当我使用zoom:1或position:relative进行测试时，我仍然未定义hasLayout）。

我正在使用PHP来制作这个表，颜色是动态定义的，所以我想避免为每个不同颜色的单元格制作一个:hover类。如果我可以在鼠标悬停时以相同的方式改变每个单元格（减轻颜色）而不必为每种使用的颜色打印单独的样式，那将是很好的。

所以 - 在IE8中，我的边界消失了。我已经尝试在不透明度休息后重置CSS，但它不起作用。

有谁知道为什么会发生这种情况，我该如何修复它或产生相同结果的替代方案？

---

这是在悬停或鼠标悬停任何浏览器...

为IE8悬停/鼠标悬停后

在IE8中将所有桌面悬停/鼠标悬停后

这是在任意数量的悬停之前和之后表格在Chrome中的显示方式。

CSS：

td.colors { 
   border:  1px solid black;  
   height:  4px; 
   padding: 0px; 
} 

td.colors_middle_row {   
   border-top:     0px; 
   border-right:   2px solid #000000;
   border-bottom:  0px;
   border-left:    2px solid #000000;
} 

td.colors_top_row {   
   border-top:     2px solid #000000;
   border-right:   2px solid #000000;
   border-bottom:  0px;
   border-left:    2px solid #000000;
} 

td.colors_bottom_row {  
   border-top:     0px;
   border-right:   2px solid #000000;
   border-bottom:  2px solid #000000; 
   border-left:    2px solid #000000;
} 

JS / JQuery：

$('td.colors').on('mouseover hover', function() { 
   $(this).css('opacity','0.3');
   $(this).css('filter','alpha(opacity=30)'); 

});

$('td.colors').on('mouseleave blur', function() { 
   $(this).css('opacity','1');
   $(this).css('filter','alpha(opacity=100)');  

   /*  --- just something I tried that didn't work ---
   if ($(this).hasClass('colors_middle_row')) 
   {
      $(this).css('border-top',    '0px'); 
      $(this).css('border-right',  '2px solid #000000'); 
      $(this).css('border-bottom', '0px'); 
      $(this).css('border-left',   '2px solid #000000');  
   } 

   else if ($(this).hasClass('colors_top_row')) 
   {
      $(this).css('border-top',    '2px solid #000000'); 
      $(this).css('border-right',  '2px solid #000000'); 
      $(this).css('border-bottom', '0px'); 
      $(this).css('border-left',   '2px solid #000000');   
   }

   else if ($(this).hasClass('colors_bottom_row')) 
   {
      $(this).css('border-top',    '0px'); 
      $(this).css('border-right',  '2px solid #000000'); 
      $(this).css('border-bottom', '2px solid #000000'); 
      $(this).css('border-left',   '2px solid #000000');   
   }
   */
});

TD的HTML看起来像这样：

<td style="width: 12.5%; background-color: rgb(132, 245, 118); opacity: 1;" class="colors colors_middle_row" title="WED @ 8:00">   </td>

我不打算发布任何PHP，因为我认为它根本不相关......但是请记住，用PHP构建表的方式是我不想使用{{1}的原因} class并且更喜欢将颜色更改为相同程度的悬停/鼠标悬停的方法。我能想到的唯一选择是可能搞乱十六进制颜色代码并为每个RGB或其他东西添加一个特定的数字......我不知道。我需要留下边界。这里有一些奇怪的东西 - 在IE中，在边框消失之后，如果你鼠标悬停在同一个单元格上，边框会出现鼠标悬停但在鼠标离开后会再次消失。

就像不透明度覆盖了边框，但我不知道如何纠正它。我尝试将其设置为.99 / 99而不是1/100（以及其他一些值）但它仍然没有做我想要的......

---

---

这适用于IE8和Chrome。基本上......我使用了下面提供的方法，并决定只将值存储在对象/数组中。我正在使用2个数组（正常颜色悬停然后悬停到正常颜色）因为我在IE8中按值可靠地查找数组索引时遇到了一些问题。我对代码中的颜色变化做了一些假设。

:hover

我已经做了很长时间，“颜色”对我来说不再是一个字

Answer 1

我认为你在这里得到的基本上是IE的filter样式中的一个错误。

那时没什么新东西。

您可以尝试通过在<td>中添加额外的标记层来解决此问题，并改为使用样式。我希望它应该有用。

或者，您可以尝试使用像CSS3Pie这样的库，它可以让您访问一些其他CSS3功能，这些功能在旧的IE版本中通常不可用，例如rgba颜色，这是一种更好的方式。与使用IE笨重的opacity样式相比，为您的背景颜色添加透明度比filter和 waaay 更好。

希望有所帮助。

Answer 2

由于您已经在使用jQuery来处理悬停，我可能会将颜色更改为计算得更轻的版本，如您所述：

  

我能想到的唯一选择是可能会弄乱十六进制   颜色代码并为每个RGB或其他东西添加一个特定的数字

使用一个简短函数found here和另一个found here，这是一个快速演示：

http://jsfiddle.net/thirtydot/dzRnF/1/

$('td').on('mouseenter', function() {
    $(this).data('originalColor', $(this).css('background-color'));
    $(this).css('background-color', shadeColor2(rgb2hex($(this).css('background-color')), 0.6));
}).on('mouseleave', function() { 
    $(this).css('background-color', $(this).data('originalColor'));
});

function shadeColor2(color, percent) {   
    var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
    return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}
function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}