Opacity CSS无法在IE8中运行

Question

我正在使用CSS来指示jQuery向下滑动部分的触发器文本:即,当您将鼠标悬停在触发器文本上时,光标将变为指针,并且触发器文本的不透明度会降低以指示文本具有单击操作.

这在Firefox和Chrome中运行良好,但在IE8中,不透明度不会改变.

我尝试了各种CSS设置但没有成功.

例如

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

什么阻止IE改变不透明度？注意:我已经尝试了各种不同的元素,交换CSS语句的顺序,并且只是自己使用IE.我也试过用

-ms-filter: "alpha(opacity=75)";

但没有成功.

我已经完成了尝试在IE8中进行不透明度修改的事情.

有任何想法吗？

Answer 1

设置这些(就像我写的那样)在我需要时为我服务:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

Answer 2

不知道这是否仍然适用于8,但是历史上IE并没有将几种样式应用于没有"布局"的元素.

见:http://www.satzansatz.de/cssd/onhavinglayout.html

Answer 3

您需要首先为符合标准的浏览器设置不透明度,然后是各种版本的IE.见例子:

但是这个不透明度代码在ie8中不起作用

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

请注意,我删除了-moz,因为Firefox是符合标准的浏览器,不再需要该行.另外,-khtml是折旧的,所以我也删除了那种风格.

此外,IE的过滤器不会验证w3c标准,因此如果您希望页面验证,请使用if IE语句将您的标准样式表与IE样式表分开:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

如果你将ie怪癖分开,你的网站将验证就好了.

Answer 4

显然,alpha透明度仅适用于IE 8中的块级元素.设置显示:块.

Answer 5

使用display: inline-block;IE8上的工作来解决此问题.

FWIW opacity: 0.75适用于所有符合标准的浏览器.

Answer 6

CSS

我曾经使用CSS-Tricks中的以下内容:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

罗盘

但是,更好的解决方案是使用Opacity Compass mixin,您需要做的就是@include opacity(0.1);它将为您解决任何跨浏览器问题.你可以在这里找到一个例子.