3

我一直在一个新项目（专门针对 IE8+）上成功地使用了PIE.htc版本，但是，在尝试克隆应用了 PIE 样式的元素时遇到了麻烦。

我在这里得到了一个 jsfiddle 来说明问题，欢迎输入（甚至是 PIE 的其他类似方法/替代方案） - 但是，.htc文件不能跨域引用，所以这个 fiddle 只包含我使用的实际标记和 CSS。

任何帮助表示赞赏。什么可能导致这种情况，是否有潜在的解决方法？

干杯，peol

4

1 回答 1

6

使用 PIE 的后代克隆元素时会遇到两个问题：

  1. PIE 插入的 VML 元素也将包含在克隆的内容中，但由于某种原因，它们被错误地克隆，没有命名空间前缀，并且
  2. PIE 赋予其每个目标元素的唯一 _pieId 属性也被复制到克隆中，这导致不再唯一的 id 之间的冲突。

因此，为了进行正确的克隆，我们需要摆脱两者。第一个可以通过临时将每个 PIE 元素的行为样式属性设置为“无”来完成，然后克隆和恢复它。将其设置为“无”会触发 PIE 的清除方法，这些方法会删除所有 VML 元素。第二项必须手动完成，因为 PIE 不会自动删除 _pieId 属性。这两个都很容易编写脚本。

这是一个自定义 jQuery 扩展，它在我的有限测试中处理这个问题：

jQuery.fn.cloneWithPIE = function(dataAndEvents, deepDataAndEvents) {
    // Find elements with PIE attached and remove their behaviors:
    var pied = this.find('[_pieId]').css('behavior', 'none');

    // Perform the clone:
    var clone = this.clone(dataAndEvents, deepDataAndEvents);

    // Remove the _pieId from each of the original and cloned 
    // elements, and restore the behavior:
    pied.add(clone.find('[_pieId]')).removeAttr('_pieId').css('behavior', '');

    return clone;
}

然后，您将调用 cloneWithPIE 方法，就像调用普通克隆方法一样：

$('.someEl').cloneWithPIE().appendTo(newParent)

希望这对你有用。

于 2011-06-17T03:11:54.237 回答