Question

我正在使用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，但我不是图像格式专家，所以可能存在问题吗？

其他人有这个问题吗？

Answer 1

我不完全确定，但可能是-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 */
}

Source and Explanation

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

1 个答案: