html - css 和 html 中的边框问题

Question

我在使用 CSS + HTML 时遇到了这个问题。当我点击图片时，图片的边框大小不正确。

http://jsfiddle.net/kcyDC/1/

我在 chrome 开发工具包中尝试了一些东西，但都无济于事。

HTML

<div class="btns">
    <input type="radio" name="a" value="a" id="a" />
    <label for="a">
        <img src="http://a1.mzstatic.com/us/r30/Music/a2/6b/7d/mzi.cpbdtjki.100x100-75.jpg"/>
    </label>
</div>

CSS

.btns input[type="radio"] {
    display: none;
}
input[type="radio"]:checked + label {
    border: 1px solid red;
}

Answer 1

您可以通过将标签的显示设置为 inline-block 来解决此问题:

input[type="radio"] + label {
    display: inline-block;
}

所以它占据了包含图像的整个高度。

更新的 jsFiddle:http://jsfiddle.net/kcyDC/5/