在某些浏览器上运行ajax功能时某些div的内容变得模糊答案

【问题标题】：The content of some div becomes blurry when running an ajax function on some browsers在某些浏览器上运行ajax功能时某些div的内容变得模糊
【发布时间】：2019-10-02 20:39:59
【问题描述】：

我目前正在开发一个 Web 应用程序项目，作为我的开发人员培训的一部分。它的原理很简单，它是一个搜索引擎，专门用于列出对属于客户的数据库的 SQL 查询结果，并且之前已迁移。实际上，在某些浏览器（基于 chrome 的浏览器）上，我有一个特殊的问题，当显示结果（它们在表格中）时，某些 divs 标记的内容变得模糊且有点不可读。这可能是一个常见问题，但是我还没有发现任何关于这个错误的明确信息。模糊区域位于页面顶部。

这是搜索时调用的函数：

function rechercher()
{
    var name = document.getElementById('rech').value;
    var checked = 0;
    var selectedMarque = $('#marque :selected').text();
    var selectedType = $('#type :selected').text();
    var selectedCat = $('#cat :selected').text();
    var selectedCompagnie = $('#compagnie :selected').text();

    if ($('#inputFerro').is(":checked"))
    {
        var checked = 1;
    }
    else
    {
        var checked = 0;
    }

    $.ajax({
    type: "POST",
    url: "./fonction/some.php",
    data: {name: name, checked:checked, selectedMarque: selectedMarque, selectedType:selectedType, selectedCat: selectedCat, selectedCompagnie: selectedCompagnie},
    success: function(msg){
        if(checked == 0)
        {
            $('#resultat').empty();
            if(msg.length <= 2)
            {
                $('#resultat').empty();
                $('#resultat').append("Aucun résultat");
                $('#resultat').append('<table id="tblRes"></table>');
            }
            else
            {
                $('#resultat').append('<table id="tblRes"></table>');
                $('#tblRes').append("<tr><th>Compagnie</th><th>Type</th><th>Numéro</th><th>Marque</th><th>Essieux</th><th>Catégorie</th><th>Échelle</th></tr>");
                $('#tblRes').append(msg);
            }

        }
        else
        {
            $('#tblRes').empty();
            $('#tblRes').append("<tr><th>Type</th><th>Numero article</th><th>Marque</th><th>Catégorie</th><th>Echelle</th></tr>");
            $('#tblRes').append(msg);
        }

    }
    });
}

以及存放结果的结果div：

<div id="resultat">
    <table id="tblRes">

    </table>
</div>

我把下面的情况截图分享给大家，希望能看到模糊效果。

下面是chrome下的渲染图（buggy版）： chrome version

下面是firefox下的渲染图： mozilla version

网页申请链接：www.ferrovipathe.ch

此项目正在开发中，因此尚未完成。无需对其余操作发表评论：D 如果我没有按照 SO 要求的所有标准提出问题，我提前道歉。这是我的第一篇文章！ :)

【问题讨论】：

也许你应该包含一段（最少的自我内容）代码来显示你已经做了什么？
对我来说就像普通的 Chrome 抗锯齿，增加对比度，切换字体或让它更大一点（Arial 不适合那个尺寸）。
"显示结果时（它们在表格中）某些div标签的内容变得模糊" 所以当不是时内容很清晰显示结果？
@CD001 有趣，所以这只是我的 chrome 安装？
@kerbholz 不，当您启动搜索并显示结果时，它在我的屏幕上变得模糊

标签： javascript php jquery html ajax

【解决方案1】：

我已经通过修改 CSS 在您的网站上对其进行了测试，它似乎对我有用：/ Nomatter，我发现了真正的问题，你的 CSS 上有一个 margin-top: 0px，如果你删除它，它似乎显示没有模糊，希望这个答案能帮助你解决这个烦人的错误......

这里有一些证明：

您的页面带有margin-top: 0px

你的页面没有这条线

【讨论】：

【解决方案2】：

我想我找到了适合你的东西，这里是source

    #yourDiv {
      -webkit-filter: blur(0.000001px);
    }

    #yourDiv {
      -webkit-font-smoothing: antialiased;
    }

希望对你有所帮助；）

【讨论】：