IE7 转换后透明度丢失答案

【问题标题】：Transparency lost after IE7 TransformIE7 转换后透明度丢失
【发布时间】：2012-10-09 11:30:26
【问题描述】：

我正在创建一个面向 IE7 的页面。在页面的某个部分，用户可以旋转和放大和缩小包含背景图像和许多其他以编程方式添加的 div 的区域（div 元素）。非图像 div 是空的，但使用 css 设置样式以具有位置、颜色和透明度。它们会根据用户操作突出显示图像的区域。

我在这里使用 jQuery 2D 转换插件： https://github.com/heygrady/transform/wiki 进行旋转和缩放/缩放。我正在使用许多其他 javascript 和 jquery 来处理用户交互。

除了一件事之外，一切都很好：当用户缩放或旋转 div 时，高亮 div 的透明度会丢失。它们完美地与父 div 和图像一起旋转和缩放，但颜色变得不透明和浑浊。就好像高光后面的区域变黑了一样。

有人知道我能做些什么吗？我尝试在转换后通过 javascript 重新应用 css 样式。我可以更改 div 的颜色，但更改透明度只会使 div 或多或少变得模糊 - 它永远不会再次变得透明。

一个可能更简单的问题：是否可以删除使用此库创建的转换？如果这是可能的，那么当用户移回 100% 比例且不旋转时，也许我可以重置所有内容。这并不理想，但会比目前的情况更好。

【问题讨论】：

旋转时 div 是否有可能丢失 hasLayout？尝试添加zoom:1 样式，看看是否仍然发生，或者使用 IE 开发人员工具检查是否在 div 旋转后设置了 hasLayout 属性。一些示例代码会让我们更容易提供帮助，因为这样我们就可以看到实际发生的情况。
@KelvinMackay hasLayout 在所有值为 -1 的元素上保持设置。我不知道 IE 开发人员工具 - 非常感谢你。我通常不只针对 IE，所以我通常使用 FF 来诊断问题。代码库现在非常庞大。如果我能想出办法让它变小，我会发布一些东西。
您可能还会发现免费的 DynaTrace AJAX 版本对一般的 IE 开发很有帮助，尽管我认为它对解决这个特殊问题没有多大帮助。 compuware.com/application-performance-management/… 只是一个想法-恐怕我不知道如何解决您的问题，但是从您所描述的给您带来问题的元素来看，这些元素只是具有 25% 不透明度的彩色 div-也许您可以使用一个半透明的PNG作为每个div的背景图片，而不是达到相同的效果并可能回避问题？
@KelvinMackay：使用 PNG 作为背景图像效果很好。谢谢！如果您想将其作为答案提交，我会将其标记为已接受。
太棒了！乐意效劳。在处理 IE 时，解决方案似乎总是一种解决方法而不是修复，但只要它能完成工作，嗯？ :)

【解决方案1】：

假设您使用的是 jQuery 库，要删除 css 规则，只需传递一个空字符串即可。

$('selector').css('transform', '');

【讨论】：

这有帮助。 $("#el").css('filter', ''); 允许我在旋转和缩放正常时删除转换（或过滤器？）。仍然希望找到一种在元素旋转或缩放时具有透明度的方法。
它将删除任何通过 javascript 应用的 CSS 规则

【解决方案2】：

根据我们在问题 cmets 中的对话回答：)

根据您所描述的给您带来问题的元素只是具有 25% 不透明度的彩色 div。您可以使用半透明的 PNG 作为每个 div 的背景图片，以实现相同的效果并回避问题。

【讨论】：