背景图像未在 Chrome 或 IE 中显示答案

【问题标题】：background-image not displaying in Chrome or IE背景图像未在 Chrome 或 IE 中显示
【发布时间】：2016-05-28 20:46:34
【问题描述】：

背景图像在 Firefox 中有效，但在 Chrome 或 IE 中无效。我在 Stackoverflow 上尝试了几种解决方案，
就像关闭我的广告屏蔽一样，
将相同的代码放在文件的头部，

<head><style>...</style><head>

将相同的代码放在链接的样式属性中，

<a style="..."> ... </a>

我已确保没有从 appearance 属性派生的元素，

我尝试过包含 background-attachment: fixed; 样式

最后我尝试改变：

background-position-y: 465px;
background-position-x: 5px;

收件人：

background-position: left center;

以下代码的所有这些变体都可以在 Firefox 中完美运行。

.search-btn {
        padding-left: 32px;
        padding-right: 10px;
        background-image: url(../Images/search.png);
        background-position-y: 465px;
        background-position-x: 5px;
        background-repeat: no-repeat;
    }

但不在 Chrome 或 Internet Explorer 上。

<asp:LinkButton ID="btnSearch" runat="server" CssClass="btn blue-btn mar-bot search-btn" OnClick="btnSearch_Click">Search</asp:LinkButton>

CssClass 属性中提到的其他类按照出现在我的 CSS 样式表中的顺序：

.mar-bot {
    margin-bottom: 6px;
}

.blue-btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.blue-btn:hover {
  background-color: #6FC6FF;
}

.btn {
  border-radius: 5px;
  padding: 4px 8px;
  text-decoration: none;
  color: #fff;
  position: relative;
  display: inline-block;
}

.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

.search-btn {
...
}

【问题讨论】：

查看chrome的调试工具看看原因，可能找不到图片。
@Aristos 我检查了，但根据 Chrome 它可以找到图像...
没有实际页面很难说。可能png 有问题，试试jpg 看看是否有效。然后，如果作品尝试在 png 上使用不同的设置。也许您需要为窗口设置宽度和高度以显示精灵的那部分。可能与设置有关，而不是与 png...
你真的在开发工具/萤火虫控制台中没有任何错误吗？路径中的大写可能是问题吗？（../Images/search.png 与 ../images/search.png）。没啥思路，建议你在jsFiddle中复现一个简单的测试CodePen，如果还是不行可以分享一下。
不是图片位置。

标签： css asp.net google-chrome internet-explorer firefox

【解决方案1】：

.search-btn {
            padding-left: 32px;
            padding-right: 10px;
            background-image: url(../Images/search.png);
            background-position: left center;
            background-repeat: no-repeat;
            display: inline-block;
        }

由于某种原因，它需要display: inline-block; 才能工作。
我不知道为什么会这样，但确实如此。

【讨论】：