Question

我正在使用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的内联样式，是否有人有任何想法？

Answer 1

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

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

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

Answer 2

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

Answer 3

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

示例：

width : 100% !important;

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

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

3 个答案: