javascript - 跨度元素未正确更新

Question

更新 3 - 10/09/2013:刚刚使用 版本 29.0.1547.66 m 对此进行了测试，问题仍然存在。如果其他人可以对此进行测试并让我知道结果，那就太好了。您需要一个内联元素，例如带有一些文本的跨度，使其相对定位并从左侧和顶部移动您想要的任意像素。然后设置一些 jScript 将元素的当前内部 html 更改为其他内容，您应该会看到它在视口(viewport)中保持不变，但在 DOM 中正确更改。

更新 2:经过更多测试后，问题似乎出现在内联元素上，例如 span，或者具有使它们内联的 CSS，但也相对定位的元素，似乎是这种组合导致了这个问题。在 Chromium 上发布错误后，它已被标记为 cr-Blink-Rendering 问题，看起来是在浏览器视口(viewport)中渲染 DOM 的引擎。我正在使用 版本 29.0.1547.57(当前版本结束于 .66，但我的版本由于错误而未更新)。因此，如果您使用的是最新版本，则此问题可能不再存在。

更新:经进一步调查，我认为问题出在最新的 Chrome 构建版本 29.0.1547.57 m 因为我在 IE9 和 Firefox 21 中以内联方式测试了该元素并且它工作正常。我已经在 chromium 上提交了一个错误报告

我在执行 ajax 请求、获取一些值并将它们放置在我页面中存在的 span 元素中时遇到问题(我无法使用 jsfiddle 重新创建)。

我有一个非常奇怪的问题，ajax 请求正在运行并返回值。这些值通过 jQuerys .html' 方法插入到跨度元素中，当我使用 Chrome 开发人员工具检查 DOM 时，我可以在跨度中看到新值。

但是，我在页面上看到的并没有反射(reflect)这一点，它仍然显示旧值。然而，如果我尝试突出显示该值，它会立即更改为正确的值(显示在 DOM 中的值)。

我什至尝试在 ajax 调用之前更新 span 值(因为我使用的值是从 jQuery UI 的 slider 小部件获取的)但这仍然会产生相同的结果。

有没有人遇到过这个？

编辑:这是一些代码

HTML

<div id="NewLoanSliderAmount" class="NewLoanSliderRules"></div>
<span id="NewLoanSliderAmountDisplay" class="NewLoanDisplay">£600</span>

slider 代码。这是我尝试直接从 slider 值更新它的版本

$("#NewLoanSliderAmount").slider({
    value: amount,
    min: 300,
    max: amount,
    step: 100,
    change: function (event, ui) {
        $("#NewLoanSliderAmountDisplay").html("£" + ui.value);
        window.CkSpace.GetLoanValues();
    }
});

这是ajax代码:

    (function (CkSpace, $, undefined) {
        CkSpace.GetLoanValues = function () {
        var url = "/Home/UpdateAPR";

        $.get(url, { Amount: $("#NewLoanSliderAmount").slider("value"), Length:     $("#NewLoanSliderLength").slider("value") }, function (data) {
            $("#NewLoanAmount").html("£"+data.LoanAdvance);
            $("#NewLoanLength").html(data.LoanTerm);
            $("#NewLoanMonthlyCost").html("£"+data.LoanInstalment);
            $("#NewLoanTotal").html(data.LoanGrossRepyable);
            $("#NewLoanAPR").html(data.LoanAPR+"%");
            $("#NewLoanSliderAmountDisplay").html("£" + data.LoanAdvance);
            });
        }

    } (window.CkSpace = window.CkSpace || {}, jQuery));

编辑 2:

另一件需要注意的事情是，如果我在正在填充的跨度上设置一个断点并单步执行它，它每次都会在 Chrome 开发者工具中完美更新

Answer 1

虽然我不知道为什么会导致问题，但我已经找出导致问题的原因。

首先，我尝试将 span 更改为 div 并将 display:inline 添加到 css。还是不行。

然后我删除了内联显示，突然间，它作为一个 block 级元素起作用了。

如果有人知道更多关于这是为什么并且可以详细说明，那么请做!

编辑:经过进一步调查，我认为问题出在最新的 Chrome 版本 版本 29.0.1547.57 m 因为我在 IE9 和 Firefox 21 中以内联方式测试了该元素并且它有效美好的。我认为是时候提交错误报告了!