jQuery UI 对话框调整大小打破内容宽度

Question

我这里有一个奇怪的错误，我有一些想法可能导致这个错误。首先让我告诉你这个问题。

每当我调整对话框的大小时，“ui-dialog-content”的宽度就会更改为小于对话框其余部分的宽度。这很难解释，所以我创建了一个简短的视频来展示这个问题，以及如何在调整大小时删除 jQuery 添加的“width”属性，它解决了这个问题。

视频:http://www.screencast.com/t/3oczroeEZUg

我发现这是 Bootstrap 3 和 jQuery UI 的共同问题。我删除了 Bootstrap 3 样式表(它破坏了我的整个网站设计)并解决了这个问题。这意味着两者之间存在冲突的 CSS。

我不确定要添加什么代码来帮助您提出解决方案。我只是使用 jQuery UI 和 Bootstrap 3。我想我只能希望其他人以前遇到过这个问题并且可以帮助我找到解决方案，我尝试搜索但没有找到任何东西，我可能只是没有搜索正确的关键字。

编辑:我已经在 bootstrap.css 中跟踪到这些行的问题

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

现在正在研究如何仅在对话框中覆盖此代码，因为删除此代码会破坏我的整个网站。

Answer 1

我找到了一个解决方案，虽然不是 100% 完美，但已经足够好了。

正如我帖子中的编辑所述，问题是由 Bootstrap 3 中的这个 CSS 引起的。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我创建了一个文件，并在包含仅覆盖对话框的这些设置的 Bootstrap 之后包含了它。

.ui-dialog-content {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

这主要导致对话框的行为。一些问题仍然存在，尽管它们是小问题。

1. 中间部分现在仍然宽了大约 5 个像素。如此处所示:http://www.screencast.com/t/0nzFa9Kd
2. 每次您点击框并调整其大小时，按钮区域都会被切掉大约 5 - 10 个像素。最终按钮几乎完全隐藏，如下所示:http://www.screencast.com/t/EbNT7JjGX

相比之下，这些问题都是次要的，所以现在我将忽略它们。希望这对其他人有帮助!