jQuery ajax 成功回调后，CSS 可见性属性在 Webkit 浏览器上不起作用答案

【问题标题】：CSS visibility property not working on Webkit browsers after jQuery ajax success callbackjQuery ajax 成功回调后，CSS 可见性属性在 Webkit 浏览器上不起作用
【发布时间】：2010-03-31 11:59:07
【问题描述】：

问题：
我通过单击一些光标图像来进行 jQuery .ajax 调用，以便在图书目录中导航，用 ajax 响应（纯 html）替换 div 的内容。有一个光标图像，仅在图书有超过 1 张图片时显示，由 php 代码控制，该代码直接呈现 ajax 回调中给出的 HTML。

在 FF 和 IE > 7 中，脚本可以正常工作。但是在 Webkit 浏览器中，ajax 回调做得很好，但它无法正确呈现 CSS。似乎正确的光标图像在第一次显示后被缓存，即使这本书可能没有任何额外的图像。有趣的是，显示了正确的光标图像，但 JS 功能不起作用（因为没有额外的图像应该如此），而且当您使用 Chrome 中打开的开发人员工具进行导航时，CSS 呈现正常，因为它应该是，就像在 FF 和 IE7 中一样。

可能是$(document).ready使用不正确的问题？

这是作为外部 .js 文件插入的 JS 代码：

function goBook(val, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'down'){
         direction = '+';
         inverse = '-';
    }else{
         direction = '-';
         inverse = '+';
    }
    $(document).ready(function(){
         $("div.itemlateral").animate({'top': inverse+"500px"});
         $.ajax({
             url: "projects",
             type: "POST",
             data: { book: val, pic: 0, language: lang },
             dataType: "json",
             success: function(data){
                 $("div.inner-content").html(data.projects);
                 $("div.itemlateral").css({'top': direction+"1000px"});
                 $("div.itemlateral").animate({'top': "0px"});
                 }
             });
         });
     }
}

function nextImg(val, val2, dir, lang){
    var direction = '';
    var inverse = '';
    if(dir == 'right'){
        direction = '+';
        inverse = '-';
    }else{
        direction = '-';
        inverse = '+';
    }
    $(document).ready(function(){
        $("div.node-image").animate({'left': inverse+"500px"});
        $.ajax({
            url: "projects",
            type: "POST",
            data: { book: val, pic: val2, language: lang },
            dataType: "json",
            success: function(data){
                         $("div.inner-content").html(data.projects);
                         $("div.node-image").css({'left': direction+"1000px"});
                         $("div.node-image").animate({'left': "0px"});
                      }
            });
     });
}

【问题讨论】：

标签： jquery css ajax webkit rendering

【解决方案1】：

经过一些测试，我会说这与 javascript 无关，而是 webkit 中一个实际模糊的重绘行为错误。

我这样说的原因是因为一旦您强制重绘文档（按 ctrl+a 或调整窗口大小，或者如您所说的在自动重绘文档的开发模式下），箭头就会消失。

我进行了一些测试，并在您的 .disabled [style.css] 课程中将 visibility: hidden; 替换为 display: none; 似乎可以解决问题。

【讨论】：