CSS

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中的块级元素。设置display：block。

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);，它将为您处理任何跨浏览器问题。您可以找到示例here。

Answer 7

这是IE 8的答案

它的工作原理要让alpha在IE8中工作，你必须使用该元素的位置属性，如

职位：亲属或其他。

http://www.codingforums.com/showthread.php?p=923730

Answer 8

上面的答案都没有对我有用，所以我只给了我的DIV标签一个透明的背景图片，它适用于所有浏览器。

Answer 9

此代码有效

filter: alpha(opacity = 50); zoom:1;

您需要添加缩放属性才能正常工作：）

Answer 10

您还可以添加polyfil以在IE6-8中启用本机不透明度。

https://github.com/bladeSk/internet-explorer-opacity-polyfill

这是一个独立的polyfil，不需要jQuery或其他库。有几个小注意事项它不能在内联样式上运行，对于任何需要不透明度polyfil的样式表，它们必须遵守同源安全策略。

用法很简单

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>

Opacity CSS无法在IE8中运行

10 个答案:

CSS

指南针