IE8 中的悬停：效果后出现问题
我一直在尝试从这个页面实现CSS效果： http:// Sixrevisions.com/css/snazzy-hover-effects-using-css/
我一切正常，除了他为 IE8 发布的修复程序；我添加了一些条件代码，因此该修复仅由 <= IE8 & 使用因此不包括普通浏览器的 CSS3 重置。然而，修复似乎不起作用，我看到的只是文本和内容。文本就这样换行了。
您可以在此处查看工作示例：http://www.thecssninja.com/demo/css_hover2/
我设置的示例在这里：http://www.condorstudios.com/example.html
有什么想法为什么我的不起作用吗？我能看到的唯一真正的区别是他使用的是列表和列表。他将他的 a 标签设置为 blocks，我尝试了这个，但它弄乱了我的布局。
I have been trying to implement the css effect from this page here: http://sixrevisions.com/css/snazzy-hover-effects-using-css/
I have everything working fine except for the fix he posted for IE8; I added some conditional code so the fix is only used by <= IE8 & hence didn't include the CSS3 reset for normal browsers. However, the fix doesn't seem to have worked, all I see is the text & the text is wrapped at that.
You can see working examples here: http://www.thecssninja.com/demo/css_hover2/
My example I set up is here: http://www.condorstudios.com/example.html
Any ideas why mine isn't working? Only real differences I can see is he is using lists & he has his a tags set as blocks, I tried this but it messes my layout up.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为这是因为您在容器和图像之间添加了（并设置了样式）元素（
。我认为它弄乱了 IE8 中的定位我制作了一个适用于 Chrome 和 IE8 的简单的 jsfiddle 演示，基于原始示例。抱歉，我没有 IE9 或更高版本，因此无法验证这是否有效。我遇到的唯一问题是
:hover覆盖元素太宽，所以我添加了left。 :0;right:0到课堂上，这可能不完全是你想要的，但我希望它能有所帮助:-)I think it is because you have added (and styled) an element between the container and the image (the
<span class="overlay">. I think it is messing up the positioning in IE8. I have made a simple jsfiddle demo that works in Chrome and IE8, based on the original example. Sorry I don't have IE9 or above so cannot verify if this will work.The only problem I had was that
:hoveroverlay element was too wide, so I added aleft:0;right:0to the class. This may not be exactly what you are after but I hope it helps nonetheless :-)