IE 8 特定背景图像错误
我有一个 1px x 1px 的灰色像素。它用作 BG 图像：
background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;
所以我期望一条灰色的垂直线，即 div 中最高的高度。常用伎俩。
所以我在除了 IE 8 之外的每个浏览器中都能正确地看到这一点。在 IE 8 中它显示为渐变。上面黑，下面亮。这有多疯狂？我从未见过这样的事情，希望能得到一些见解。
谢谢！
I have a 1px by 1px grey pixel. It is used as a BG image:
background-attachment:scroll;
background-color:transparent;
background-image:url("../image/vertical-border.png");
background-position:393px 0;
background-repeat:repeat-y;
So I expect a grey, vertical line the height of whatever is tallest in the div. Common trick.
So I see this properly in every browser EXCEPT IE 8. In IE 8 it displays as a gradient. Dark up top, light down below. How crazy is that? I've never seen anything like this, and would love some insight.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不幸的是，这是一个 PNG 渲染错误（令人惊讶），在大多数情况下，人们将平铺 PNG 图像的大小增加到 10x10，问题就解决了。希望这对你来说没问题 - 也许使用 1x10，甚至更好的是 1x50...
根据记忆，部分解释是 IE 将其过滤应用于 1x1 图像所需的处理量，当你将其乘以数字时它出现在屏幕上的次数 - 对于 IE 来说太硬核了。
请参阅： IE8 的透明 png 渲染在我的网站上是 FUBARed ，以及相关的帖子/评论。
编辑：
嘿，既然只是一条垂直线，可以直接用GIF格式代替吗？或者也许是 8 位、非 alpha 透明 PNG？
Unfortunately this is a PNG rendering bug (surprise surprise), in most cases people increase the size of the tiled PNG image to say, 10x10 and the problem is removed. Hopefully this is ok for you - perhaps use a 1x10, or even better a 1x50...
A partial explanation, from memory, was the amount of processing required by IE to apply its filtering to 1x1 images, when you multiply it by the number of times it appears on the screen - its just too hardcore for IE.
See: IE8's rendering of transparent pngs is FUBARed on my site, and related posts/comments.
EDIT:
Hey, since it's just a vertical line, is it possible to just use GIF format instead? Or perhaps 8-bit, non alpha transparent PNG?
如果您只是想要一个 1px 灰色边框，为什么不直接使用 1px 灰色边框呢？
例子：
If it's just a 1px grey border you're after, why not just use a 1px grey border?
Example: