ie6 PNG 修复导致 24 位 PNG 图像在嵌套在带有溢出自动的 div 中时不滚动
我正在对 IE6 使用以下 PNG 修复:
http://www.dillerdesign.com/experiment/DD_belatedPNG /
它在我的文档头部被引用:
<!--[if lt IE 7]>
<script type="text/JavaScript" src="../../Scripts/DD_belatedPNG_0.0.8a-min.js" defer="defer"></script>
<script type="text/JavaScript" src="../../Scripts/DD_PNG_listing.js" defer="defer"></script>
<![endif]-->
它也在任何 jQuery 脚本等之后被引用。
我有一个表,其中包含 24 位 PNG 文件的图像。该表嵌套在带有 Overflow:auto 的 div 中,以便在表内容超出包含的 div 的高度时滚动。
示例表格行:
<tr class="odd">
<th scope="row">
<input type="checkbox" value="" name="check1b" id="check1b">
</th>
<td>
CIF NWE
</td>
<td>
USD/MT
</td>
<td>
<img height="6" width="7" alt="Price movement indicator: Down" src="/content/images/icons/icons_red_down_arrow.png">
</td>
<td>
-1.00
</td>
<td>
1107.00
-1120.00
</td>
<td>
<img height="6" width="7" alt="Price movement indicator: Down" src="/content/images/icons/icons_red_down_arrow.png">
</td>
<td>
-2.00
</td>
<td>
<a href="#" class="spot_quote">
SPOT
Quote </a>
</td>
</tr>
IE6 中的问题是,当我滚动 div 时,PNG 图像保持原样,不会随表格内容的其余部分一起滚动。
任何想法。
I am using the following PNG fix for IE6:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
It is referenced thus in the head of my document:
<!--[if lt IE 7]>
<script type="text/JavaScript" src="../../Scripts/DD_belatedPNG_0.0.8a-min.js" defer="defer"></script>
<script type="text/JavaScript" src="../../Scripts/DD_PNG_listing.js" defer="defer"></script>
<![endif]-->
It is also referenced after any jQuery scripts etc.
I have a table which has images that are 24 bit PNG files in it. This table is nested in a div with overflow:auto for scrolling once the table content extends beyond the height of the containing div.
Example table row:
<tr class="odd">
<th scope="row">
<input type="checkbox" value="" name="check1b" id="check1b">
</th>
<td>
CIF NWE
</td>
<td>
USD/MT
</td>
<td>
<img height="6" width="7" alt="Price movement indicator: Down" src="/content/images/icons/icons_red_down_arrow.png">
</td>
<td>
-1.00
</td>
<td>
1107.00
-1120.00
</td>
<td>
<img height="6" width="7" alt="Price movement indicator: Down" src="/content/images/icons/icons_red_down_arrow.png">
</td>
<td>
-2.00
</td>
<td>
<a href="#" class="spot_quote">
SPOT
Quote </a>
</td>
</tr>
The issue in IE6 is that when i scroll the div the PNG images stay put and do not scroll with the rest of the table content.
Any ideas.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
添加position:relative到带有overflow-y:auto的div(父div)
add position:relative to div with overflow-y:auto (the parent div)
该特定 PNG 修复脚本以涉及 VML 的复杂方式工作。据推测,这与溢出效果不兼容。
尝试不同的脚本;有很多可供选择。选择一个简单的脚本,因为只需替换几个未缩放的、未处理的图像,不需要任何更高级的脚本。
That particular PNG fix script works in a complex way involving VML. Presumably that's not compatible with the overflow effect.
Try a different script; there are plenty to choose from. Go for a simple one, as just to replace a couple of unscaled, untiled images there is no need for any of the more advanced scripts.
由于您已经在页面上安装了 jQuery,因此您可以尝试基于 jQuery 的修复: http://jquery .andreaseberhard.de/pngFix/。您也可以尝试这个:http://www.ideashower.com/our_solutions/png-悬停/。
但我真的不喜欢任何基于 AlphaImageLoader 过滤器的解决方案。我只使用 .GIF,其边缘与背景颜色相匹配,这对我来说效果很好。
让我们知道什么有效!
Since you've already got jQuery on the page, you might try a jQuery-based fix: http://jquery.andreaseberhard.de/pngFix/. You may also try this one: http://www.ideashower.com/our_solutions/png-hover/.
But I really don't like any of the AlphaImageLoader filter based solutions. I just use a .GIF, with the edges matted to the background color, and that works pretty well for me.
Let us know what works!