html - css 和 html 中的边框问题

Question

我在使用 CSS + HTML 时遇到了这个问题。当我单击图像时，图像的边框尺寸不正确。

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

我在chrome developer kit中尝试了一些东西，都无济于事。

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/

Answer 2

Paul Robe 几乎拥有它，但底部仍有差距。将边框放在图像上解决了这个问题。

input[type="radio"] + label {
    display: inline-block;
}
input[type="radio"] + label img { /* this is the null state */
    border: 0px;
}
input[type="radio"]:checked + label img {
    border: 1px solid red;
}

新小提琴

为了澄清 Paul 关于高度的观点：标签是一个内联元素，不会自动调整其高度以适应其内容。它假定它应该与其中的任何文本一样高。更改显示规则使其更像是一个可以调整其高度的锁级元素。