Question

我在我的页面中包含了modernizr，但如果我无法访问这些浏览器，我将如何测试它是否在IE 6-7中运行？做类似的事情： http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/

基本的CSS：

    .accslide {
     height: 0px;
     width: 0px;
     overflow: hidden;
    }
    input[type="radio"]:checked+label ~ .accslide {
     width: 100%;
     height:auto;
    }

如果第二个选择器没有触发，则内容将不可见。

如果不支持CSS3，是否只有加载Modernizr的方法？如何测试Modernizr是否正在处理我的CSS选择器？

Answer 1

如果给定的浏览器不支持，那么Modernizr将不会启用CSS功能（如更新的选择器）。它主要是特征检测库。

Answer 2

Modernizr不会向浏览器添加任何功能，只需检查现有的功能。如果要测试选择器支持，则需要添加它。 Here's a gist

但是，即使这样做也不会让你完成你想要完成的事情，我想，当你检查了accslide元素时，它会显示[type="radio"]元素。单选按钮。如果您希望支持IE6和Linux，您很可能需要使用javascript。 7 - IE6甚至不支持#radioContainer .accslide { height: 0px; width: 0px; overflow: hidden; } #radioContainer.on .accslide { width: 100%; height:auto; }选择器，因此您也无法使用它。

您需要在单选按钮上添加一个单击/更改处理程序，并使用类更新它的容器，以正确获取所需的功能，尤其是支持IE6。

以下是CSS的示例：

on

现在，在javascript中，当有人点击/更改单选按钮时，只需向#radioContainer元素添加/删除.radio-container.on类。 注意：我给了#radioContainer一个ID b / c IE6不会为两个css类名称设置一个元素（最终，你不会支持IE6而只能提供{{1}}，这不适用于IE6）

Modernizr基础知识

2 个答案: