PNG-8 format image opacity problem in IE8 & IE7

最新推荐文章于 2024-07-28 18:55:56 发布

garcon1986

最新推荐文章于 2024-07-28 18:55:56 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery JavaScript 文章标签： ie IE jquery-ui opacity PNG png tab TAB

本文链接：https://blog.youkuaiyun.com/garcon1986/article/details/8279412

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

jQuery

10 篇文章

订阅专栏

本文介绍了一个关于jQuery UI库在IE7和IE8浏览器中显示Tab面板时出现样式错误的问题。作者使用了png-24格式的图片替代png-8格式来解决IE浏览器对图片透明度解释不正确导致的黑色边框问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*by Jiangong SUN*/

I use jquery ui library for displaying several tabs with correspondant contents in my project.

It works perfectly in Firefox and Chrome. When I click a tab different from current tab, it will show the content with new tab clicked.

Here is the correct display for my tabs:

Its css is like this:

.ui-tabs-panel { 
	display: block; 
	width: 890px; 
	float:left; 
	border-width: 0; 
	padding: 30px 15px 70px 40px; 
	margin-left:-15px; 
	background: url(bg-tab.png) 0 bottom no-repeat; 
}

But the tabs don't display correctly when I swtich tabs in IE7 & IE8.

It displays just like this:

Just like what you've seen, the border becomes black, which cause my page disgracefully.

The reason is IE doesn't interprete the opacity of png-8 format image correctly.

For this reason you can use the recommandation solutions of Jack Moore.

Or just change your image format from png-8 to png-24 like me, because IE works with png-24.

Hope this helps!

Enjoy coding!