Question

我有一个输入框的背景图片。它在IE / FF中工作正常，但由于某些原因，它在iPad Safari中不可见.Below是相同的CSS;

#rightContent  .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}

请帮忙。谢谢。

Answer 1

我建议将background样式拆分成单独的部分。并非所有浏览器都支持transparent（可能还支持该样式的其他部分）。

当浏览器看到样式时，他们不知道该怎么做，他们通常会忽略整个样式。将background-image置于其自己的行（例如，它自己的风格）将让该属性被可以处理它的浏览器拾取，而不是因为它被浏览器不知道的东西混淆而被错过约。

Answer 2

我相信background-color的默认值是透明的。你有没有尝试过设置颜色？此外，由于您有一个无重复的设置图像，为什么不将图像设为jpg / png并设置颜色以匹配您想要的背景颜色。

Answer 3

我遇到了同样的问题，并设法使用jQuery获得了一个有效的解决方案

    $(document).ready(function () {

        var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';

        $('.commands .command').css({
            background: 'url(' + buttonsFilename + ')',
            width: '55px',
            height: '55px',
            display: 'inline-block'
        });
    });

我在ASP.NET MVC网站中使用它，因此<% %>标记。

我只能使用后台快捷方式css属性来使用它。我无法让以下任何一个工作......

背景图像
将backgroundImage
'背景图像'

...使用对象表示法时。不幸的是，这会消除您可能拥有的任何其他背景设置。但我通过使用另一段jQuery设置我的background-position属性来解决这个问题。

Answer 4

我遇到了同样的问题，但我发现我使用的图像片太薄而无法在iPad上显示。这是一个纹理，所以我使用15px切片和x重复，这在所有浏览器中都很好，但不是iPad。经过一些实验，我发现iPad的门槛似乎是130px。

背景图片在iPad Safari中不可见

4 个答案: