CSS IE中的PNG8黑色边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1566828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PNG8 Black Border in IE
提问by Tom
I have a problem in IE with PNG8 images in that it appears with a big dirty black border in the shadowing of my *.png. (IE7, IE8)
我在使用 PNG8 图像的 IE 中遇到问题，因为它在我的 *.png 的阴影中出现了一个很大的脏黑色边框。(IE7, IE8)
I am using alphatransparency and basically have shading under my small image. All browsers render this fine, except IE which renders the shading as a black circle?
我正在使用 alphatransparency 并且基本上在我的小图像下有阴影。所有浏览器都可以很好地呈现，除了 IE 将阴影呈现为黑色圆圈？
I need the image "transparent" because it appears on top of a variety of multicolored backgrounds, etc?
我需要图像“透明”，因为它出现在各种彩色背景之上，等等？
Any ideas?
有任何想法吗？
回答by Jason
I am compelled to respond. I just solved this issue as well. Just to recap, in IE7 and IE 8, transparent PNG and GIF images in links sometimes have a black border or shadow around them.
我被迫回应。我也刚刚解决了这个问题。回顾一下，在 IE7 和 IE 8 中，链接中的透明 PNG 和 GIF 图像有时会在它们周围出现黑色边框或阴影。
You need to check to make sure there is no opacity filters on these images. I have opacity on 100. I changed this to
您需要检查以确保这些图像上没有不透明度过滤器。我的不透明度为 100。我将其更改为
filter:0;
Remember also for blurry link text, you need to specify a background color for the link or else it will be fuzzy and blurry.
还请记住，对于模糊的链接文本，您需要为链接指定背景颜色，否则它将变得模糊不清。
Death to IE!!
IE 之死！！
回答by Tom
OK - solved the problem. It seemed that my JS was assigning
好的 - 解决了问题。似乎我的 JS 正在分配
filter: alpha(opacity=100);
to the image and this is what was causing the black mark to appear as I had already made the image alphatransparent in the PNG8 encoding.
到图像，这就是导致黑色标记出现的原因，因为我已经在 PNG8 编码中使图像透明。
回答by Jamie
I'd like to say thanks for the answer, and to add something. In my specific instance, I needed to override a style that was:
我想感谢您的回答，并补充一些内容。在我的特定实例中，我需要覆盖以下样式：
filter: alpha(opacity=50);
Adding the below code made my opacity correct, but added the issue of the black edges:
添加以下代码使我的不透明度正确，但添加了黑边问题：
filter: alpha(opacity=100);
This is the line that saved me by fixing the issue:
这是通过解决问题挽救了我的行：
filter: 0;
I hope this helps someone else too!
我希望这对其他人也有帮助！
回答by halocursed
I have suffered from similar issues with opacity in ie7, ie8 what you can do is give your png image a background colorwhich will remove the ugly borders from the image....It works for me
我在 ie7、ie8 中遇到了类似的不透明度问题，你可以做的是给你的 png 图像一个 abackground color这将从图像中删除丑陋的边框......它对我有用
回答by TomTheMeatBomb
This worked for me with animated opacities:
这对我的动画不透明度有用：
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
回答by Ismo Vuorinen
After searching for alternative solutions, I returned to the source images for answers.
在寻找替代解决方案后，我返回源图像寻求答案。
It seems that 24bit .png-files cause problems, but 8bit versions behave well. I haven't researched this in depth.
似乎 24 位 .png 文件会导致问题，但 8 位版本表现良好。我没有深入研究这个。
These settings in Photoshop's Save for Web & Devices -dialog helped me get rid of the black strokes in opacity animations:
Photoshop 的 Save for Web & Devices -dialog 中的这些设置帮助我摆脱了不透明动画中的黑色笔触：
PNG-8, Selective, Diffusion, Transparency, Colors: 256, Matte: None, No transparency Dither, Interlaced and Convert to sRGB with "Internet Standard RGB".
PNG-8，选择性，扩散，透明度，颜色：256，哑光：无，无透明度抖动，隔行扫描并使用“Internet 标准 RGB”转换为 sRGB。
回答by Fresheyeball
You can do it in CSS buy using IE's proprietary filtering system.
您可以使用 IE 的专有过滤系统在 CSS 中进行购买。
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
you will need to use a blank.gif for the 'first' image in your background declaration. This is simply to confuse ie8 and prevent it from using both the filter and the background you have set, and only use the filter. Other browsers support multiple background images and will understand the background declaration and not understand the filter, hence using the background only.
您需要在背景声明中为“第一个”图像使用 blank.gif。这只是为了混淆ie8，防止它同时使用你设置的过滤器和背景，只使用过滤器。其他浏览器支持多个背景图像，并且会理解背景声明而不理解过滤器，因此仅使用背景。
You may also need to play with the sizingMethod in the filter to get it to work the way you want.
您可能还需要在过滤器中使用 sizingMethod 以使其按您想要的方式工作。
回答by Josh Mouch
I had the same thing happen to a PNG with transparency that was set as the background-image of an <A> element with opacity applied.
我有同样的事情发生在具有透明度的 PNG 上，该透明度被设置为应用了不透明度的 <A> 元素的背景图像。
The fix was to set the background-color of the <A> element.
修复方法是设置 <A> 元素的背景颜色。
So, the following:
因此，以下内容：
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
Turns into:
变成：
/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
