Javascript ExtJS分页工具栏格式不正确

我使用ExtJS4.2.1向网格面板添加了一个分页工具栏。除了工具栏呈现的格式不正确外，一切正常。页面输入字段非常小，周围有一些奇怪的框架。运气好的话，我可以在字段中键入一些内容，但我什么都看不懂。我在默认主题、neptune和gray主题中都看到了这一点，Chrome和Firefox也是如此：

我使用了默认的主题。你知道吗

如果这是一个主题或CSS相关的问题（是吗？）

但是，我认为这个问题与数据存储无关

我没有自己做任何造型

---

更新：如果我将基本代码和include复制到一个空白的HTML文件中，所有内容都会正确显示。显然，这是由于Wordpress添加到页面中的内容而产生的问题。目前，我还不知道如何解决这个问题。

使用Chrome developer工具，我比较了我坏掉的工具栏和。这是有区别的。断开的输入字段子树具有：

"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"

多想想这个。。。。CSS可能会意外更改输入字段的格式（基于元素类和许多其他元素特性）。但是，格式良好的元素和格式错误的元素的类是如何不同的呢？CSS不会更改类属性，是吗？这种差异从何而来

我还检查了CSS规则。我可以在wordpress Twenty14主题中找到一条使外部框架可见的规则：

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

这是主题重置部分的一部分。禁用时，帧将消失

另一条规则是：

.entry-content td,
.comment-content td {
    padding: 8px;
}

它会阻止输入字段正确显示。禁用此选项后，仅需固定条形图中所有项目的垂直位置，以使条形图看起来正确

---

知道这些影响的根本原因是什么吗？

我没有找到令人满意的解决方案。ExtJS（Sencha）的制造商也不能给我一个解决方案。目前，安全嵌入ExtJS内容而不发生CSS冲突的唯一方法似乎是使用iframe。我也读过关于使用其他JS框架的类似问题，所以我想这通常是个问题。

您是否对文本字段（工具栏使用的）进行了覆盖或自定义样式设置？控制台中是否有错误？没有一个完整的例子来说明问题，我们只是抓住了稻草。顺便说一句，ExtJS分页网格示例（）创建了工具栏，并将其分配到

bbar

config中，如果这有什么不同的话。我的第一个动作是检查Chrome web开发工具中的元素，查看边框来自什么CSS，并从那里向后工作。如您所见，它与4.1.1海王星主题配合得很好。因此，无论问题发生在哪里，都与您没有显示的内容有关。请注意，所有Ext css都是以

.x-foo

类命名的。问题很可能是wordpress中的某些内容正在覆盖某个全局规则，从而导致了问题。是的，没错。我实际上找到了负责任的WP规则（参见我以前的答案）。但我还是不明白为什么。例如，非常基本的table/th/td重置规则能够覆盖ExtJS规则，但ExtJS规则应该更具体。

"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.entry-content td,
.comment-content td {
    padding: 8px;
}