Html 通过复选框/单选按钮跨浏览器适当调整响应图像的大小

我目前正在做一个测验，用图像作为复选按钮和单选按钮的占位符

除了填充物外，这些都很好用

在Safari和Chrome中，我没有任何问题。Firefox没有正确计算每个浏览器的大小

下面是正在发生的一个JSFIDLE示例

下面是我用来使图像响应的css。 .智力测验{ 最大宽度：100%！重要； 高度：自动； 显示：块； 保证金：自动； }

总共有10张图片，所以我打算有两行，每行5张。（在实际站点上，需要根据其他设备调整媒体查询）

这是我用来用图像替换单选按钮的CSS

.quiz input[type="radio"]{
display:none;
}
.quiz input[type="radio"] + label {
background: #fff;
display: inline-block;
padding: 5px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
.quiz input[type="radio"]:checked + label {
background: #ef529d;
display: inline-block;
padding: 5px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}

在实际的站点上，在firefox中，图像都可以放入容器中，但是尽管使用了“框大小：边框框；”和“-moz-box大小：边框框；”，填充似乎没有正确计算

在jsfiddle示例中，情况看起来更糟

我该怎么做才能让它在Firefox上也起作用

---

谢谢

轻松修复，问题是标签元素没有宽度限制，图像扩展以填充标签，标签似乎随机选择了一个大小

修复方法是添加以下css

.quick标签{
最大宽度：100%；
}

JSFIDLE

.quiz input[type="radio"]{
display:none;
}
.quiz input[type="radio"] + label {
background: #fff;
display: inline-block;
padding: 5px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
.quiz input[type="radio"]:checked + label {
background: #ef529d;
display: inline-block;
padding: 5px;
box-sizing: border-box;
-moz-box-sizing:border-box;
}