如何检测不渲染 .png 透明度的浏览器

Question

我有这段代码可以根据一周中的某一天渲染图像。但在 IE6 及更低版本以及可能其他一些浏览器中，它不会呈现 png 不透明度。所以我想稍微改变一下，这样它就会检测到不渲染 alpha 透明度的浏览器，并告诉他们加载这个图像：“img/horarios2.png”。我尝试过这样做，以便排除 IE6 及更低版本的浏览器，这些浏览器因不渲染而闻名，但后来我想到了所有其他我可能不知道的浏览器，这些浏览器也不渲染，并且需要一些东西来统治它们出也。我不知道完成此任务的最佳方法，所以我愿意接受所有建议。

$(document).ready (function horario () {
var date = new Date();
var weekday = (date.getDay());

if (weekday==0)
    document.getElementById('horarios').src = "img/domingo.png";
else if (weekday==4)
    document.getElementById('horarios').src = "img/quinta.png";
else if (weekday==5)
    document.getElementById('horarios').src = "img/sexta.png";
else if (weekday==6)
    document.getElementById('horarios').src = "img/sabado.png";
else 
    document.getElementById('horarios').src = "img/quarta.png";
});

Answer 1

我对此问题进行了大量研究，得出的结论是，在 JavaScript 中创建功能测试是不可行的，并且 IE 6 是唯一不支持 PNG 透明度的认真使用的浏览器。既然如此，最好的选择是加布里埃尔·罗斯 (Gabriel Ross) 推荐的条件注释。可以在纯 JavaScript 中使用条件注释，我认为这就是您想要的：

var div = document.createElement("div");
div.innerHTML = "<!--[if lte IE 6]><i></i><![endif]-->";
var isIe6orLower = (div.getElementsByTagName("i").length == 1);

alert("Is IE 6 or lower: " + isIe6orLower);

更新 2012 年 6 月 17 日

请注意 IE 10 将不支持条件注释，因此这种方法在未来版本的 IE 中将不起作用。

Answer 2

有条件评论：

<!--[if IE 6]>
<script>
var ie6 = true;
</script>
<![endif]-->

Answer 3

我认为没有一种好的通用方法来检测是否支持 png 透明度。然而，现在除了 IE6 和极少数的 IE5.5 之外，所有主流浏览器都支持它。我认为您不必担心任何其他情况。

var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");

if( badBrowser ) {
    // change to "img/horarios2.png"
}

取自此处。

Answer 4

IE6 可以通过 非标准 css 过滤器 渲染 png 透明度，该过滤器调用 directX 来处理透明度代表 IE。

至于其他浏览器，只有IE愚蠢到只添加了部分PNG支持。如果浏览器支持 png，您可以放心地假设它也可以处理透明度（IE 除外）。