jQuery UI 对话框向图像添加不需要的内联样式答案

【问题标题】：jQuery UI Dialog adding unwanted inline styles to imagesjQuery UI 对话框向图像添加不需要的内联样式
【发布时间】：2009-12-09 15:58:22
【问题描述】：

我正在使用 JQUery UI 作为我正在开发的 Rails 应用程序的前端。我正在使用 jQuery 对话框窗口来显示一些选项卡式数据，并且在这些选项卡之一中我想呈现一些图像。

如果我在没有 Javascript 的情况下查看页面，图像的渲染效果很好，但是由于某种原因，当我把它全部放在一个对话框窗口中时，除了我渲染的最后一张图像之外，我从某个地方获得了一些内联样式！

没有对话窗口：

        <img alt="Dsc_0085" class="picture" src="/system/sources/3/normal/DSC_0085.jpg?1260300748" />
        <img alt="Dsc_0006" class="picture" src="/system/sources/4/normal/DSC_0006.jpg?1260301612" />

带有对话窗口：

    <img alt="Dsc_0085" class="picture" src="/system/sources/3/normal/DSC_0085.jpg?1260300748" style="height: 0px; width: 0px; border-top-width: 1px; border-bottom-width: 1px; font-size: 22px; border-left-width: 1px; border-right-width: 1px; display: inline; ">
    <img alt="Dsc_0006" class="picture" src="/system/sources/4/normal/DSC_0006.jpg?1260301612" style="display: inline; ">

我不明白为什么将图像放入对话框窗口会为它们提供高度和宽度为 0px 的内联样式，有人有什么想法吗？

【问题讨论】：

标签： jquery jquery-ui image jquery-ui-dialog

【解决方案1】：

我不知道，但您可以在 CSS 中使用 !important 覆盖它（对此请仔细检查 IE6）。

您也可以尝试在模态事件中添加$('img.picture').removeAttr('style') 之类的内容。

将display:inline 设置为内联样式很奇怪，因为默认情况下图像是内联显示的……但我相信 UI 团队有他们的理由。

【讨论】：

【解决方案2】：

最后，我只是在样式表中使用了 !important 来覆盖 jqueryui 添加的内联样式。不过，我从来没有弄清楚为什么要添加它们。

【讨论】：

【解决方案3】：

您可以在 CSS 中使用 !important 标志...

例子：

width : 100% !important;

查看此问题以获得类似修复：jQuery UI - Autocomplete generated inline style override?

【讨论】：