如何在 IE 中更改图像的不透明度？ - jQuery，CSS答案

【问题标题】：How do I change opacity of an image in IE? - jQuery, CSS如何在 IE 中更改图像的不透明度？ - jQuery，CSS
【发布时间】：2010-12-13 12:03:32
【问题描述】：

以下适用于 FF、Chrome 和 Safari：

$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().fadeTo("slow", 0.30);
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

但在 IE8 中没有（我什至没有在 7 和更早版本中进行测试）。

如何在 IE8 中实现此功能？

编辑：根据普遍要求，这里是 HTML：

<div id="slider-code">
        <a class="buttons prev" href="#"></a>
        <div class="viewport">
            <ul class="overview">           
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-bw.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>            
                <li><img src="images/red-stripe-dark.jpg" /></li>
                <li><img src="images/red-stripe.jpg" /></li>
                <li><img src="images/red-stripe-red.jpg" /></li>
                <li><img src="images/red-stripe-dark.jpg" /></li>           
            </ul>       
        </div>
        <a class="buttons next" href="#"></a>
    </div>

    <div style="clear:both"></div>

    <div id="edit-image-nav">
        <div id="add_comment"><img src="images/comment-icon.png" /></div>
        <div id="like"><img src="images/paint-icon.png" /></div>
        <div id="delete_img"><img src="images/delete-icon.png" /></div>
    </div>

请注意，当您单击“edit-image-nav”div 中的一个图标（覆盖在 UL 上方 onHover 中的图像上）时，会发生不同的功能。对于其他图标，它可以工作。但是对于#delete_img，它没有。

【问题讨论】：

id delete_img 重复了吗？
在代码中的任何地方重复？那会是原因吗？刚才搜了js文件，没有重复。
在您的标记中，我的意思是，ID 必须是唯一的。
@Nick 是的，它只出现一次。从不重复 - 无论如何都在这个页面上。
你能发布你的 HTML 吗？我刚刚在您的另一篇文章中注意到您的<img> 标签末尾不包含/>。这可能会导致 IE8 阻塞。

标签： jquery css internet-explorer internet-explorer-8

【解决方案1】：

您的代码中似乎没有错误，但如果它确实不起作用，请尝试以下操作：


$('#delete_img').click(function(e) {
            var offset = $(this).offset();
            $(this).parent().parent().parent().children("img").fadeTo("slow", 0.30, function() {
                   $(this).css('opacity', 0.3);
            } );
            $(this).parents("li").children("img").css({ 'border' : '3px solid #f6f6f7' });
            e.stopPropagation();
});

【讨论】：

不...不起作用。顺便说一句，我不确定这是否会改变任何东西，但我正在尝试改变图像的不透明度。 $(this).parent().parent() 是一张图片。
老兄……太棒了。这行得通。那么为什么会在 IE8 而不是 Safari、Chrome 或 FF 中发生这种情况呢？除了 IE 很烂吗？
Michal 怎么说“图像不能成为父母”。所以我认为问题就在于此。为什么它在 Safari、Chrome 和 FF 中有效是一个很好的问题。

【解决方案2】：

图像不能是父级（不太可能），因此您的选择器错误。如果没有相关的 HTML sn-p，很难说它应该是什么，但您可能想尝试一下（如果您的删除按钮比要删除的目标低两级，这将起作用）：

$(this).parent().parent().find("img").fadeTo("slow", 0.30);

image 上的 fadeTo 方法在 IE8 上运行良好。如果这不起作用，请发布您的 html。

否则，请确保您的 img 标签具有指定的高度和宽度，否则 IE 将不会对元素应用不透明度更改，因为它“没有布局” - 有关详细说明，请参阅 http://www.satzansatz.de/cssd/onhavinglayout.html。

【讨论】：