如何使用CSS强制图像完整显示？

Question

我有一个小图标（17 X 17）链接到我尝试显示的页面：

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

引用的CSS类因此定义：

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("/_layouts/images/pdficon.gif");
    background-repeat: no-repeat;
}

图标：

但是，

../在底部被截断了：

我在CSS类中使用background-size尝试了以下内容：

background-size: 100% 100%;
background-size: 80px 60px;
background-size: contain;

......但他们都没有任何区别。

如何让图标显示出来，甚至是它的脚？

Answer 1

尝试使用

.finaff-small-pdf-form-icon:before {
    content: url("/_layouts/images/pdficon.gif");
    display: inline-block;
    height: 17px;
    margin-right: 20px;
    width: 17px;
}
.finaff-small-pdf-form-icon {
    border: none;
    display: inline-block;
    line-height: 20px;
    position: relative;
}

Answer 2

您提供的代码运行正常。我使用您现有的样式和HTML创建了一个小提琴：

JSFiddle

<强> HTML

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

<强> CSS

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("http://i.stack.imgur.com/vIXOF.gif");
    background-repeat: no-repeat;
}

我认为您的问题来自正在应用于页面上包含元素的父样式。您应该查看浏览器的开发人员控制台，以获得有关导致该样式问题的更多说明（ F12 ）

Answer 3

这最终会为我工作：

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 18px;
    display: block;
    padding-left: 20px;
    border: none;
    background-image: url("http://i.stack.imgur.com/vIXOF.gif");
    background-repeat: no-repeat;
}

关键添加（行高也改变了，但无疑原始值仍然没问题）是：

display: block;

为了更全面地披露，之前显示的HTML嵌入在div中，如下所示：

<div class="JS_Toggle_Holder_Content">
    <a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>
    <br/>
</div>

这是引用的CSS类：

.JS_Toggle_Holder_Content {width: 96%; padding: 5px; margin: 5px auto; border: 1px solid #ddd; display: none; background: #fff;}