Question

我有一个使用背景图片的按钮，即

.btn{
    font-size: 16.18px;
    font-family: "OpenSans";
    color: rgb(255, 255, 255);
    border-width: 1px;
    border-color: rgb(229, 229, 229);
    border-style: solid;
    background-image: url('../images/arrow.png');
    background-repeat: no-repeat;
    height: 45px;
    z-index: 97;        
    cursor: pointer;
    margin-left: 0px;
    background-color: rgb(179, 32, 19);        
    background-position: right 20px center;
    text-indent: 15px;
}

HTML

<input type="button" value="Click the Development team" class="btn">

此按钮包含动态文本，文本可能多于给定的字符（i.e Click the Development team to view）。现在的问题是，当我使用background-position: right 20px center;时，它与Chrome和Firefox一起工作得非常好，但是它不适用于8。

任何人都可以建议我!!

DEMO

Answer 1

背景位置只有两个最大值。所以background-position: right 20px center;无效。使用background-position: 20px center;或类似内容仅制作xposition yposition组合。

Answer 2

背景位置只能由IE8或更低版本中的两个值组成，因为这些浏览器上没有四个值表示法。

只需使用right center或100% 50% ...

即可完成

您始终可以将基于像素的偏移添加到图像中。因此，您可以在图片右侧放置20px的空白空间，并将图片定位为100％（right）和50％（center）。

（资料来源：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Browser_compatibility）

背景定位问题在ie

DEMO

2 个答案: