<div> </div>的绝对定位

Question

在下面的fiddle中，我试图找出为什么放置复选框的div大于内容本身（这只是一个空复选框的图像）。我试图完成与提琴手上看到的相同，但没有在底层边界上的白色背景的重叠。 我认为问题与这种CSS风格有关：

.selectable-content label:after {
    background: white;
    color: #9fc5e8;
    content:"\f096";
    position:absolute;
}

Answer 1

您必须使用媒体查询中的一些底部值，但您的白色背景是由于标签上的默认line-height。

http://jsfiddle.net/xtm9D/11/

添加了：

.selectable-content > label {
    padding-top: -5px;
    font-family:'FontAwesome';
    font-size: 32px;
    cursor: pointer;
    line-height:26px;
}

也讨论了您的媒体查询。

Answer 2

:after创建的元素包含角色，但也有白色背景。由于此元素稍后在DOM中并位于其父级的右下角，因此它将与背景重叠。

这可以通过创建实际图像的半透明图片，并从CSS中删除白色来解决。

Answer 3

尝试设置行高。当我添加行

line-height: 31px

到

.selectable-content > label {...

问题得到解决。我最初设置line-height: 32px，但仍然有一个白色像素。您将需要找到一种一致的方法来定位元素并设置与复选标记字符相关的行高以解决溢出。