Question

我正在从我学习的软件学院做作业..任务是创建一个简单的画廊，以更大的分辨率可视化点击的缩略图照片。不知怎的，我在一个表格中使用了无线电按钮（正确或不正确）完成了...而且画廊适用于大多数主要的borwsers，除了IE（当然）......

我已经尝试过IE9和IE11，它似乎根本不起作用。无论您点击缩略图，都没有任何变化。如果有人看一下代码并给出并提出可能存在问题的建议，我可以指定。

提前谢谢！

我已经用随机的图像替换了图像：

img {
 position: relative;
}

#holder {
 width: 1075px;
 margin: 10px auto;
}

#holder form {
 width: 100%;
 text-align: center;
 position: relative;
}

label .thumb {
 width: 150px;
 height: 120px;
 opacity: 0.6;
}
label .thumb:hover {
 opacity: 1;
}
label .display {
 position: absolute;
 width: 860px;
 height: 688px;
 top: 130px;
 left: 10%;
 display: none;
}
input {
 display: none;
}
input:checked + label .thumb {
 opacity: 1;
}
input:checked + label .display {
 display: block;
}
li {
 display: inline;
 list-style-type: none;
}

Answer 1

我认为问题可能是由单选按钮的display:none引起的，单选按钮在display:none （仅限IE）时可能无法检查。

如果问题是这样，请尝试将您的单选按钮放在远离页面的地方而不是隐藏它们，替换它：

input {
    display: none;
}

用这个：

input {
    position:absolute;
    left:-500px;
}

希望这有帮助

Answer 2

那么，

经过一些调查变成了一个众所周知的IE漏洞，所谓的 - 可点击的标签。当您在标签内部有img时，单击相关标签时，它根本不会检查您的收音机。

由于我不能在我的任务中使用js来解决方法，我将不得不寻求其他解决方案。

我认为分享到目前为止我发现的东西可能会有用。

使用IE浏览器的HTML / CSS（可能：检查伪选择器）可视化问题

2 个答案: