Question

我目前正在进行测验，图像作为检查按钮和单选按钮的占位符。

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

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

这是一个正在发生的事情的例子。

这是我用来使图像响应的CSS。 .quiz img { 最大宽度：100％！重要; 高度：自动; 显示：块; 保证金：自动; }

总共有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 label { max-width:100%; }

的jsfiddle

http://jsfiddle.net/8FG7j/

交叉浏览器正确调整响应图像作为复选框/单选按钮的大小

1 个答案: