jQuery UI 图标精灵在 <p:column selectionMode="multiple">

Question

我有一个

<p:dataTable>

和

<p:column selectionMode="multiple">

。

<p:dataTable id="someAppDto" var="someAppDto" widgetVar="someAppDtoWV"
    value="#{someBean.requestedApplList}"
    style="width:96%" rows="100" paginator="true" scrollable="true" scrollHeight="300"
    selection="#{someBean.dvoList}" rowSelectMode="checkbox"
    rowKey="#{someAppDto.m_nDVOId}"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    filteredValue="#{someBean.requestedApplListFltr}" rowsPerPageTemplate="10,50,100" resizableColumns="true" liveResize="true">
    ...
    <p:column selectionMode="multiple" style="width:10px;"/>
    ...
</p:dataTable>

相同的代码自过去 10 年以来一直运行，没有出现任何问题。然而，自过去 3-4 周以来，我们在复选框中看到了这些奇怪的图标。它不会影响任何功能，只会造成混乱。所以我们的最终用户想要修复它。

选中复选框后，奇怪的字符就消失了。但是当取消选中时，它会再次出现。我尝试为此创建一个 jsfiddle，但无法重现。因此，在 chrome 浏览器中发布 Inspect Element 的屏幕截图。

是的，我确实删除了浏览器缓存并尝试过，但没有成功。

Answer 1

我在某种程度上同意你们关于浏览器升级的看法。但我想知道为什么 Edge 和 Chrome 浏览器都会出现这种情况？？？过去 4-5 个月以来没有部署任何代码。无论代码发生什么变化，都是在 4-5 个月之前发生的，与此无关。

好的，现在这就是我所做的，它正在我的本地工作。我还没有在 Dev/UAT 中部署。

.ui-chkbox .ui-chkbox-box{
   height: 12px;
   width: 12px;
   background: #ffffff none !important;
   text-shadow : none;
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
}

之后：

.ui-chkbox .ui-chkbox-box{
   height: 13px;
   width: 13px;
   background: #ffffff none !important;
   text-shadow : none;
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
}

仅将高度和宽度从 12px 更改为 13px。

仅供参考：上面的 CSS 代码位于我们的全局 .css 文件中

我知道这不是一个好的解决方案，但就目前而言，它正在发挥作用，用户也很满意。我仍然会寻找更好的解决方案