Question

最近我将ExtJs Grid集成到现有网页中，导致了CSS冲突。我在现有样式表中发现了冲突的CSS。不幸的是，我无法修改我当前的样式表，因为整个网站建立在它之上。

我尝试过使用 ctCls ， baseCls ， bodyCfg ， bwrapCssClass 和 bodyCssClass ，但没有像预期的那样成功。

以下是我现有网站的冲突样式表

div
{
font-weight: bold;
font-size: 12px;
visibility: visible;
font-family: Arial, sans-serif;
white-space: nowrap;
position: absolute;
}

样式位置：绝对导致冲突。我试过CSS覆盖，但没有按预期工作。

请注意：将样式 position：relative 设置为渲染网格中的每个DIV标记可以解决问题。我已经使用IE Developer Toolbar模拟了它。

有人可以帮助我如何为渲染网格设置，以便我可以成功覆盖母版CSS样式的位置：绝对， position：relative < / em>的

有没有人遇到过类似的问题？我可以成功覆盖CSS吗？任何帮助将不胜感激。

谢谢

Answer 1

我不认为，在所有<div> - 页面上的元素上以这种通用方式设置CSS样式是个好主意。但是好的......您可以尝试使用以下CSS规则覆盖设置：

.x-grid3,
.x-grid3 div {
    font-weight: normal;
    position: static;
}

Answer 2

我的网络项目遇到了同样的问题，我找了很长时间才找到解决方案。问题是两个元素在同一个框架中使用相同的Css。因此，避免冲突的最佳方法是将网格面板渲染到另一个框架（始终进入同一页面）。您可以使用Managed IFrame user extension或uxmedia。我正在使用uxmedia扩展。在uxmedia中创建iFrame：

var htmlViewer = new Ext.ux.ManagedIFrame.Panel({  

    border  : false,

    title   : title,

    header: header,

    region:'center',

    iconCls : iconCls,

        // Here your Grid Panel comes within an url from server side
    defaultSrc : urlAddress
        });

CSS冲突 - 位置：ExtJs Grid中的绝对值

2 个答案: