html - 跨浏览器适当调整响应图像的大小作为复选框/单选按钮

Question

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

除了填充外，这些都工作正常。

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

这是正在发生的事情的 jsfiddle 示例。

这是我用来使图像响应的 css。 .quiz img { 最大宽度:100%!重要； 高度:自动； 显示: block ； margin :自动；

总共有 10 张图片，所以我打算有两行，每行 5 张。 (在实际站点上，有媒体查询调整到其他设备)

.questionOneO {
width: 20%;
float: left;    
}

这是我用来用图像替换单选按钮的 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;
}

http://jsfiddle.net/35DTq/6/

在实际站点上，在 firefox 中，所有图像都适合容器，但尽管使用了“box-sizing: border-box;”，但填充似乎没有正确计算。和“-moz-box-sizing: border-box;”

在 jsfiddle 示例中，它看起来更糟。

我该怎么做才能在 Firefox 上也能正常工作？

谢谢

Answer 1

很容易解决，问题是标签元素没有宽度限制，图像扩展以填充标签并且标签似乎随机选择大小....

修复是添加以下css

.quiz 标签{ 最大宽度:100%； }

JSFiddle

http://jsfiddle.net/8FG7j/