悬停在 IE7 中的背景图像停止加载指示

Posted 2023-03-06

【中文标题】悬停在 IE7 中的背景图像停止加载指示

【英文标题】：Hover with background image stops loading indication in IE7

【发布时间】：2011-08-17 01:34:09

【问题描述】：

在我的 asp.net webform 页面中，我有一个带有单个输入字段和一个提交按钮的简单表单。发起 post 请求，然后将鼠标悬停在提交按钮上时，浏览器停止显示加载状态（进度条消失，出现“完成”标签，标签中的加载动画再次变为站点图标。

我已经能够将错误缩小到followihg css规则：

.button:hover   
    background-image:url("/content/images/buttonHoverGradient.jpg");  
  

在下面的html上

<input type="submit" class="button" title="Select a provider" value="Select">

在我看来，IE 发起了获取图像的请求，然后将这个新请求的状态作为整体状态。我不知道如何证明这一点。有什么想法吗？

更新 按钮类在整个页面中使用，我们无法事先知道它们的尺寸。因此，不能像@teresko 建议的那样使用嵌入多个状态的单一背景。

更新 它似乎也在其他版本的 IE 中。一些研究似乎指向 Doctype（这是目前的怪癖，因为 asp.net webforms 3.5 并不真正允许严格）

【问题讨论】：

+1 我不知道，但我也很想知道答案！

【参考方案1】：

您是否尝试对按钮的正常状态和 :hover 状态使用相同的图像，并且仅在鼠标悬停时更改图像的位置？有点像this example。

这应该至少可以解决部分问题。

【讨论】：

这是一个合理的建议，但我们不知道我们的按钮会有多长时间（翻译、整个网站上的不同标签等）。

如果您的元素长度未知，则只需使用两部分：Sliding doors 方法.. 只需使其与上述解决方案一起使用。请记住，半透明、图像位置和 IE7 不能很好地配合使用 - 只是假装透明。

天哪。在按钮上悬停背景图像的滑动门？你说得对，这将是一个解决方案，但对于我们得到的回报来说，这太过分了。 IE 用户只需要使用一个古怪的浏览器。感谢您的建议:)