在Firefox中点击后,我无法在按钮上正确呈现加载程序图像。正如您在下面的2张图片中看到的那样,加载程序在Chrome上正确显示,但它在Firefox上也不起作用 - 加载程序图像没有融入背景,边框清晰可见。 / p>
左侧Chrome浏览器和右侧Firefox浏览器的屏幕截图:
这是我的情况。首先,我需要支持IE 8,这使得所有样式都很成问题。 IE 8不仅不支持多个背景,而且常规按钮背景也是渐变,IE8也不支持线性渐变。最后一个障碍是,可以处理动画的Web浏览器支持的唯一图像格式--GIF - 不支持多级透明度,因此将加载器GIF正确地混合到下面的渐变中真的很麻烦。
我的解决方案是:
以下是使用的2张图片:背景渐变图案(仅 1px 宽)和装载器。然后是CSS代码。您会注意到我使用 Base64 字符串作为加载程序映像。这需要在点击后立即加载图像。
.button-blue,
.button-grey {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 31px !important;
width: auto !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: 13.0px !important; /* IE 8 fallback */
font-size: 1.08333rem !important; /* Other browsers */
font-weight: bold;
text-align: center;
text-shadow: none;
}
.button-grey {
padding-left: 15px;
padding-left: 26px;
/* IE 8 fallback */
background-color: #c0e5ea;
background-image: url(images/arrows/blue-left.png);
background-repeat: no-repeat;
background-position: 14px center;
/* Other browsers *
* The arrow is irrevelant, as it's displayed only before the button is clicked */
background: url(images/arrows/blue-left.png) 14px center no-repeat,
url(images/button-grey-background-regular.png) 0 0 repeat;
/* Displays the loader image after the button is clicked */
.button-grey.button-grey-clicked {
/* IE 8 fallback */
background-color: #c0e5ea;
background: url("data:image/gif;base64,R0lGODlhEAAQAOf8ALLf5bPf5bTf5rLg5bLg5rbf5rPg5bPg5rTg…NOnb12kRBwoIFU3pNcuBl2rQyDOJY0nH6gO0FBg6YadbMjO0Etg8AGE48Qp8/EYgTDwgAOw==") center 7px no-repeat;
/* Other browsers */
background: url("data:image/gif;base64,R0lGODlhEAAQAOf8ALLf5bPf5bTf5rLg5bLg5rbf5rPg5bPg5rTg…NOnb12kRBwoIFU3pNcuBl2rQyDOJY0nH6gO0FBg6YadbMjO0Etg8AGE48Qp8/EYgTDwgAOw==") center 7px no-repeat,
url(images/button-grey-background-regular.png) 0 0 repeat;
color: #c0e5ea; /* IE 8 fallback */
color: rgba(0, 0, 0, 0); /* Other browsers */
}
有没有人知道为什么加载程序图像与Firefox上的背景图像不匹配,当它在Chrome上正确渲染时?