Question

我使用CSS + HTML遇到了这个问题。当我点击图像时，图像没有给出正确的边框大小。

我在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/

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;
}

NEW Fiddle

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

css和html中的边界问题

2 个答案: