jQuery UI 对话框边框在 1.12.1 中不再有效

Question

到目前为止，我使用的是 jQuery UI 1.11.4，并且在我的 Web 应用程序中，我显示了一些用于几个操作、信息等的对话框小部件。我使用以下 CSS 样式强制他们使用蓝色细边框，效果很好：

.ui-dialog {
  border: 2px solid #0000FF;
  padding: 0px;
}

今天我换了jQuery UI 1.12.1，边框不显示了...我分析了1.11.4和1.12.1的区别对话框，我看到的唯一主要区别是旧版本有一个额外的

display: block;

在它的风格中，所以我尝试将其添加到我自己的风格中。没有效果...边框消失了。

当然，我在询问之前先对我的问题进行了研究 - 但没有成功...描述的解决方案 here 也没有用。

有人知道这个问题吗？

Answer 1

查看他们的示例页面，只要您的 css 在 jquery-ui.css 之后加载：

.ui-widget.ui-widget-content {
  border: 2px solid #0000FF;
  padding: 0;
}

如果您的自定义样式表在 jquery-ui.css 之前加载（这是错误的 - 它应该是页面中加载的最后一个样式表，因此您可以使用具有相同特性的选择器轻松覆盖现有的 CSS ) 你需要一个稍微强大的选择器：div.ui-widget.ui-widget-content。

这仅适用于您尚未自定义 jquery-ui 小部件的默认标记并且您没有其他代码片段具有更强大的选择器来影响我们尝试设置样式的元素。

jQuery UI Dialog border not working in 1.12.1 anymore