jQuery UI Dialog为图像添加不需要的内联样式

I am using JQUery UI to for the front end of a rails app I am developing. I am using jQuery dialog windows for displaying some tabbed data and inside one of these tabs I want to render some images.

我正在使用JQUery UI来开发我正在开发的rails应用程序的前端。我正在使用jQuery对话框窗口来显示一些选项卡式数据，在其中一个选项卡中我想渲染一些图像。

The rendering of the images works fine if I view the page without Javascript, however for some reason when putting it all in a dialog window all but the last image that I render gets some inline styles from somewhere!

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

wihtout the dialog window:

没有对话窗口：

        <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" />

with the dialog window:

使用对话框窗口：

    <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; ">

I can't work out why putting the images into a dialog window is giving them inline styles with height and width of 0px, does anyone have any ideas?

我无法弄清楚为什么将图像放入对话框窗口给它们高度和宽度为0px的内联样式，有没有人有任何想法？

3 个解决方案

#1

I have no idea, but you can override it using !important in the CSS (double-check IE6 on this).

我不知道，但您可以使用CSS重写它（重要的是检查IE6）。

You can also try to put something like $('img.picture').removeAttr('style') in the modal event.

您还可以尝试在模态事件中添加类似$（'img.picture'）。removeAttr（'style'）的内容。

Very odd to put display:inline as inline style, since images are displayed inline by default... but I'm sure the UI team has their reason.

显示非常奇怪：内联为内联样式，因为默认情况下图像是内联显示的...但我确信UI团队有他们的理由。

#2

In the end I just used !important in my style sheet to override the inline styles that jqueryui was adding. I never got to the bottom of why they were being added though.

最后我在样式表中使用了！important来覆盖jqueryui添加的内联样式。我从来没有深究为什么他们被添加。

#3

You can use the !important flag in your CSS...

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

Example:

例：

width : 100% !important;

See this issue for similar fix: jQuery UI - Autocomplete generated inline style override?

有关类似的修复，请参阅此问题：jQuery UI - 自动完成生成的内联样式覆盖？

#1