Question

在我正在处理的网站上，我有一个<ul>，其中包含<li>个，其中每个都包含<div>，<span>，{{1等等。

当我将鼠标悬停在其中一个<img>上时，我正在使用jQuery将所有其他 <li>的不透明度设为0.3以引起注意专注于<li>。

我的问题是IE8（并且仅 IE8）为<li>的不透明度设置了动画，但<li>中没有任何子元素。

之前有人遇到过这个问题，或者知道修复过吗？

谢谢！

修改

请参阅以下jsFiddle以获取示例 - http://jsfiddle.net/BJ8gK/22/

Answer 1

我遇到了类似的问题 - 在IE8中，为了确保子元素的不透明度在更改其父元素的不透明度时也会受到影响，您必须应用css规则

filter:inherit

到子元素。简单修复，但也许模糊不清

Answer 2

众所周知，IE8的不透明度支持是非常不稳定和错误的。

作为一名开发人员，jQuery很好地抽象了你的细节，但他们无法避免这个功能在这个浏览器中不能正常工作的简单事实。

我的建议是完全改变大头钉，而不是淡出你可以看到的元素，而是有一个隐藏的元素，它是一个相同大小的纯白色盒子，而不是淡化它。

效果会大致相同，但在IE中效果会更好，因为你只会影响单个元素的不透明度。

Answer 3

我试图在Datatable中对行进行不透明度设置，并发现JQuery 1.10确实尝试在内部解决IE8不透明度问题。但是，它不会修复继承的元素问题。这段代码在分页表上添加并显示一个新行，可以帮助其他人：

// add the row to the table
newRow = dTable.row.add(rowData);
dTable.draw();
newIdx = newRow.index();
pos = dTable.rows()[0].indexOf(newIdx);
// draw item on correct page, from page.jumpToData()
if (pos >= 0) {
  var page = Math.floor(pos / dTable.page.info().length);
  dTable.page(page).draw(false);
  var jqRow = newRow.nodes().to$();
  var cells = jqRow.children('th,td');
  if (editable > 0) {
     // focus on first editable cell in new row...
     cells.eq(editable).click();
  }
  // child elements need to inherit - see answer by Buzz
  cells.css( 'filter', 'inherit');
  jqRow.addClass('highlight').css('opacity', 0.2);
  jqRow.animate({opacity: 1.0});
  jqRow.animate({opacity: 0.2});
  jqRow.animate({opacity: 1.0}, 2000, 'swing', function () {
  $(this).removeClass('highlight');
});

jQuery - 在IE8中动画不透明

3 个答案: