改变背景TD的IE8中的不透明度会消除边界...？
我打算制作一个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构建表的方式是我不想使用:hover类的原因，而且更喜欢方法将颜色更改为悬停/鼠标悬停的相同程度。 我能想到的唯一选择就是可能会弄乱十六进制颜色代码，并为每个RGB添加一个特定的编号或其他...我不知道。 我需要留下边界。 这里有一些奇怪的东西 - 在IE中，边界消失后，如果您将鼠标悬停在同一个单元上，那么边界将出现在鼠标悬停中，但在鼠标叶片之后再次消失。
这就像不透明覆盖了边界，但我不知道如何纠正它。 我曾尝试将其设置为.99 / 99而不是1/100（和其他一些值），但它仍然没有做到我想要的效果......
这适用于IE8和Chrome。 基本上...我使用了下面提供的方法，并决定将值存储在对象/数组中。 我正在使用2个数组（用于常规颜色悬停，然后将鼠标悬停为正常颜色），因为我在IE8中通过值可靠地查找数组索引时遇到了一些问题。 我对代码中的颜色变化做了一些假设。
var colors_array = new Object();
var shade_colors_array = new Object();
$('td.colors').on('mouseover hover', function() {
var color = $(this).css('background-color');
if (color.charAt(0) != '#') color = rgb2hex(color);
if (typeof colors_array == 'undefined' || typeof colors_array[color] == 'undefined' ) {
var sc = shadeColor(color, 15);
shade_colors_array[sc] = color;
colors_array[color] = sc;
}
var shade_color = colors_array[color];
$(this).css('background-color', shade_color);
});
$('td.colors').on('mouseleave blur', function() {
var shade_color = $(this).css('background-color');
if (shade_color.charAt(0) != '#') shade_color = rgb2hex(shade_color);
var color = shade_colors_array[shade_color];
$(this).css('background-color', color);
});
function shadeColor(color, percent) {
var num = parseInt(color.slice(1),16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
B = (num >> 8 & 0x00FF) + amt,
G = (num & 0x0000FF) + amt;
return "#" + (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
function hex(x) {
// parseInt(x) was changed to parseInt(x,10) because
// i was occasionally getting unexepcted results in IE
return ("0" + parseInt(x,10).toString(16)).slice(-2);
}
return '#' + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
我已经在这个时间内工作了很长时间，以至于“颜色”不再像我说的那样
由于您已经在使用jQuery来处理悬停，因此我可能会将颜色更改为计算较轻的版本，如您所述：
我能想到的唯一选择是可能会混淆十六进制颜色代码，并为每个RGB或某物添加特定的编号
使用这里找到的一个简短函数，以及另一个在这里找到的函数，下面是一个快速演示：
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]);
}
我认为你在这里得到的基本上是IE filter样式中的一个错误。
那么没有新的东西。
您可以尝试通过在<td>内添加一个额外的标记层，然后使用样式来解决此问题。 我希望这应该起作用。
或者，您可以尝试使用像CSS3Pie这样的库，它可以让您访问一些通常在旧IE版本中不可用的CSS3功能，例如rgba颜色，这是为背景颜色添加透明度的更好方法opacity和waaay比使用IE笨重的filter风格更好。
希望有所帮助。
链接地址: http://www.djcxy.com/p/40513.html上一篇: Changing the Background Opacity in IE8 of a TD removes borders...?