Question

背景图片适用于Firefox，但不适用于Chrome或IE。我在Stackoverflow上尝试了几种解决方案，
比如关闭我的广告块，
将相同的代码放在文件的头部，

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

将相同的代码放在链接的style属性中

<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 {
...
}

Answer 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;才能工作我不知道为什么会这样，但确实如此。

背景图片未在Chrome或IE中显示

1 个答案: