“自动”跨度的报告宽度大于实际的渲染宽度答案

【问题标题】：Reported width of "auto" span is greater than actual, rendered width“自动”跨度的报告宽度大于实际的渲染宽度
【发布时间】：2013-07-23 01:16:11
【问题描述】：

我正在使用rangy 为已使用pdf.js 呈现的文本的选择创建突出显示。突出显示的span 的 CSS 非常简单：

.image-highlight {
    background-color: rgba(152, 210, 146, 0.45);
    border: 1px solid #000000; //added this for debugging.
    cursor: pointer;
}

由于 rangy 中的连续高光依赖于之前的高光，我试图复制由 rangy 创建的span 的高度和宽度，然后将其放置在另一个根节点中。但是，我注意到新创建的span 的宽度大于原始span。同样令人沮丧的是，Chrome 报告的 spans 和 px 的宽度相同，尽管它们明显不同！

第一个 span（由 rangy 创建）的宽度为 auto，当在开发人员工具栏中的 Metrics 下查看时，Chrome 报告了该宽度，而第二个跨度（我创建）的宽度通过$.width 显式设置。

这是我复制span 的方式：

var $selectionSpan = jQuery("<span></span>").
    attr("id", "created-" + new Date().getTime()).
    css("position", "absolute").
    css("z-index", 999).
    offset({
        top: $span.offset().top,
        left: $span.offset().left
    }).
    height($span.height()).
    width($span.width());

$selectionSpan.get(0).className = $span.get(0).className;

以下是 Chrome 的图片，报告称 spans 的宽度相同：

如您所见，宽度被报告为112px，即使它们明显不同。为什么会这样？

【问题讨论】：

标签： jquery dom rangy pdf.js

【解决方案1】：

我想通了。这是由于 pdf.js 应用了 CSS3 比例转换。我希望 Chrome 报告转换后的宽度而不是未转换的宽度，但我想这可能是 Chrome 的错误。

我可以通过将以下内容附加到创建我的 span 的代码中来解决此问题：

css("-webkit-transform", $span.parent("div").css("-webkit-transform")).
css("-moz-transform", $span.parent("div").css("-moz-transform")).
css("-ms-transform", $span.parent("div").css("-ms-transform")).
css("-o-transform", $span.parent("div").css("-o-transform")).
css("-transform", $span.parent("div").css("-transform")).
css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")).
css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")).
css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")).
css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")).
css("-transform-origin", $span.parent("div").css("-transform-origin"));

所以完整的代码如下所示：

var $selectionSpan = jQuery("<span></span>").
    attr("id", "created-" + new Date().getTime()).
    css("position", "absolute").
    css("z-index", 999).
    offset({
        top: $span.offset().top,
        left: $span.offset().left
    }).
    height($span.height()).
    width($span.width()).
    css("-webkit-transform", $span.parent("div").css("-webkit-transform")).
    css("-moz-transform", $span.parent("div").css("-moz-transform")).
    css("-ms-transform", $span.parent("div").css("-ms-transform")).
    css("-o-transform", $span.parent("div").css("-o-transform")).
    css("-transform", $span.parent("div").css("-transform")).
    css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")).
    css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")).
    css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")).
    css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")).
    css("-transform-origin", $span.parent("div").css("-transform-origin"));

【讨论】：