jquery UI 按钮在 IE 9 中不起作用？答案

【问题标题】：jquery UI button not working in IE 9?jquery UI 按钮在 IE 9 中不起作用？
【发布时间】：2011-03-26 21:33:54
【问题描述】：

IE 9 中的 jquery UI 按钮似乎有问题？

这是它们的正常外观：

在 IE 9 中它们看起来像这样：

按钮的HTML是：

        <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" >

jquery 代码：

$(document).ready(function() {

    $('.input-submit').button();

});

这是一个已知问题吗？我正在使用最新的 jquery UI（昨天下载）。如何解决？

【问题讨论】：

你确定你已经下载了所有的 CSS，或者你自己的一些 CSS 没有覆盖 jQuery UI CSS？
@Hristo 是的。我从页面中删除了除 jquery UI 之外的所有样式表，它仍然看起来像上面一样。
你在firebug中看到了什么风格？
也...我不确定这是否是原因，但<input> 元素是自我转义、自我关闭的（我不确定这个术语），但它应该成为<input type="submit" name="submit_intermediate_question" id="submit-intermediate-question" value="Odoslať" class="input-submit" />
@Hristo 不，因为我在 IE9 中提供 HTML，而不是 XHTML。

标签： jquery jquery-ui internet-explorer-9

【解决方案1】：

CurvyCorners javascript 正在干扰 jQueryUI 声明的样式。

CurvyCorners 失败了，因为它仍然在 IE9 中调用 scanStyles，即使 IE9 支持 border-radius (Support for "border-radius" in IE)，我怀疑这会导致与 jQueryUI 声明的现有样式发生冲突。

http://code.google.com/p/curvycorners/source/browse/trunk/curvycorners.src.js#93 应该是：

this.supportsCorners = this.ieVer >= 9.0;

所以下载curvycorners.src.js，更改该行，并使用它代替您当前的 curvycorners.src.js 文件，按钮样式将正确显示。

【讨论】：

【解决方案2】：

您的示例在 IE9 中为我工作。检查http://jsfiddle.net/tKksD/4/。确保您在标题中加载了 jquery-ui.css。然后将 jQuery.js 和 jQueryUI.js 都放在 </body> 结束标记之前。最后将您的 jQuery 代码放在 </body> 之前和 jQuery.js 和 jQueryUi.js 脚本之后。

您也可以使用：

$('input:button').button();

在http://jsfiddle.net/tKksD/查看工作示例

或者

<button></button>` instead of `<input type"button" />

在http://jsfiddle.net/tKksD/查看工作示例

【讨论】：

【解决方案3】：

尝试检查 CSS 文件和 javascript 文件。你可能会错过一些文件。

<link href="{your path to jquery}/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="{your path to jquery}/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="{your path to jquery}/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />

<script src="{your path to jquery}/jquery-1.5.1.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.button.min.js" type="text/javascript"></script>

【讨论】：

【解决方案4】：

这里只涵盖所有基础，但我假设您使用的是最新版本的 jQuery？ v1.5.1 是support IE9 作为顶级浏览器的第一个版本。在相关的说明中，任何模糊的最新版本的 jQuery UI 都需要 jQuery 1.3.2+。

【讨论】：

由于某些插件的兼容性问题，我正在使用 jQuery 1.4.4。
不幸的是，我现在远离装有 IE9 的 PC，所以看不到问题所在。我确实注意到您的测试页面中有Byte Order Mark，这肯定会导致IE7 以quirks-mode 呈现。也许这也影响了IE9？我确实怀疑由于您使用的 jQuery 版本不正式支持 IE9，因此可能是 jQuery 问题。

【解决方案5】：

下载您的测试页面后，摆脱curvycorners 修复它。也许您可以尝试使用其他方法来获得圆角。

【讨论】：

【解决方案6】：

也许您在本地下载 jquery 和附加脚本，但图形的 url 是相对的，因此浏览器无法打开图像。尝试使用firebug for IE来检查是否有一些尝试下载图像+你可以检查你的js中是否没有任何错误。

IE9 也有开发者工具，这很有用。

【讨论】：

【解决方案7】：

我能够通过取消选择一些使用 IE9 开发人员工具标记为内联的样式来使页面上的按钮正常工作。（所有边框）您可以在下图中看到内联样式。我还没有找到原因或地点，但我会尝试稍后（希望今天）进行更多调查，并在获得更多信息时更新这个答案。希望这可能对目前有所帮助。

【讨论】：

【解决方案8】：

我昨天也遇到了类似的问题，看看并添加关闭

   <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" /> <--

因此，我的手风琴不起作用。

【讨论】：

【解决方案9】：

或者看看IE9兼容。查看..

我认为这与 doctype aso 有关。

甚至可能是这样的：

【讨论】：