悬停在背景图像上时停止在 IE7 中加载指示
在我的 asp.net web 表单页面中,我有一个简单的表单,其中包含一个输入字段和一个提交按钮。当发起发布请求然后将鼠标悬停在提交按钮上时,浏览器停止显示加载状态(进度条消失,出现“完成”标签,选项卡中的加载动画再次变为站点图标。
我已经能够缩小范围该错误归结为 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 并不真正允许严格)
In my asp.net webform page I have a simple form with a single inputfield and a submit button. When initiating the post request and then hover over the submit button, the browser stops showing the loading state (progress bar dissapears, the "Done" label appears and the loading animation in the tab becomes the site icon again.
I have been able to narrow the bug down to the followihg css rule:
.button:hover {
background-image:url("/content/images/buttonHoverGradient.jpg");
}
on the following html
<input type="submit" class="button" title="Select a provider" value="Select">
It seems to me IE initiates the request to fetch the image and then takes the status of this new request as the overal status. I don't have a clue how to prove this. Any ideas?
UPDATE
The buttons class is used all over the page and we cannot know the dimensions of them on beforehand. Therefore using a single background as suggested by @teresko image with several states embedded is not an option.
UPDATE
It seems to be in other versions of IE too. Some research seems to point to the Doctype (which is currently quircks as asp.net webforms 3.5 doesn't really alow for strict)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您是否尝试对按钮的正常状态和:悬停状态使用相同的图像,并且仅更改鼠标悬停时图像的位置?有点像这个示例。
这应该至少可以解决部分问题。
Did you try to just use a same image for both normal and :hover state of the button , and only change the position of image on mouseover? Kinda like in this example.
This should solve at least part of the problem.