IE8 中 Tapestry 调色板箭头图标的问题

发布于 2024-08-18 05:07:41 字数 811 浏览 4 评论 0原文

我正在使用 Tapestry 为 Web 应用程序创建页面，并一直在使用调色板组件向组中添加/删除项目。

该页面在 Firefox 中看起来很棒（Tapestry 似乎偏向 Firefox），但我的客户都将使用 Internet Explorer（6、7 和 8 中的任何版本），并且在 IE8 中，禁用的箭头按钮看起来很糟糕。在 Firefox 中，它们会褪色，使用 25% 的不透明度设置，但这在 IE8 中不起作用，而是会得到一个褪色的图像，图像周围有难看的黑色边框。

在 Tapestry-core 的样式表 (default.css) 中，您可以使用以下内容来禁用箭头按钮。

DIV.t-palette-controls BUTTON[disabled] IMG {
    filter: alpha(opacity = 25);
    -moz-opacity: .25;
}

这些显然已经过时了，因为 Firefox 不再支持 -moz-opacity（使用 opacity: 25 代替）。问题在于过滤器：“alpha(opacity = 25);”。如果我删除它，箭头在 IE8 中看起来很好，但它们不会褪色。

我从各个网站得到了神奇的指令：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";

但是将其放入也不起作用 - 箭头图标又丑陋了。

图标本身（与 Tapestry 一起分发）似乎只是一个常规的 PNG，但我不是图像格式方面的专家，所以也许那里有问题？

还有其他人遇到这个问题吗？

原文

I'm using Tapestry to create pages for a web app, and have been using the palette component to add/delete items to/from a group.

The page looks great in Firefox (Tapestry seems biased towards Firefox), but my customers will all be using Internet Explorer (any versions from 6, 7, & 8) and in IE8, the disabled arrow buttons look awful. In Firefox, they are faded, using an opacity setting of 25%, but this doesn't work in IE8 and instead you get a faded image with an ugly black border around the image.

In tapestry-core's stylesheet (default.css), you have the following for a disabled arrow button.

DIV.t-palette-controls BUTTON[disabled] IMG {
    filter: alpha(opacity = 25);
    -moz-opacity: .25;
}

These are clearly out of date, as -moz-opacity is no longer supported by Firefox (use opacity: 25 instead). The problem is with filter: "alpha(opacity = 25);". If I remove this, the arrows look fine in IE8, but they are not faded.

I got the magic instruction:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";

from various websites, but putting this in does not work either - the arrow icons are ugly again.

The icon itself (distributed with Tapestry) just seems to be a regular PNG, but I'm not an expert on image formats, so maybe there's a problem there?

Anyone else had this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫七 2024-08-25 05:07:41

我不完全确定，但可能 -ms-filter 需要采用正确的顺序，并且还需要设置其他属性（如 hasLayout hack）：

试试这个：

DIV.t-palette-controls BUTTON[disabled] IMG {
    opacity:0.25; /* firefox, opera, safari, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; /* IE 8 */
    filter:alpha(opacity=25); /* IE 4, 5, 6 and 7 */
    zoom:1 /* so the element "hasLayout"
    /* or, to trigger "hasLayout" set a width or height */
}

来源和说明

I'm not entirely sure, but could be that -ms-filter needs to be in the correct order and also have the other properties (like the hasLayout hack) set:

try this:

DIV.t-palette-controls BUTTON[disabled] IMG {
    opacity:0.25; /* firefox, opera, safari, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; /* IE 8 */
    filter:alpha(opacity=25); /* IE 4, 5, 6 and 7 */
    zoom:1 /* so the element "hasLayout"
    /* or, to trigger "hasLayout" set a width or height */
}

Source and Explanation

回复收藏 0 原文

~没有更多了~