悬停效果在 IE 中不起作用答案

【问题标题】：Hover effect does not work in IE悬停效果在 IE 中不起作用
【发布时间】：2015-08-08 05:13:15
【问题描述】：

尝试实现一个简单的悬停效果 - 它在 Chrome 中很有效，但在 MSIE 中却不行。有替代方案吗？或者可以在 MSIE 中进行这项工作的修复程序？我尝试过的大多数悬停/翻转效果在 IE 中都有这个问题。

normalize.css
demo.css
set2.css
font-awesome.min.css

标记 - 页面

<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,800,500,600' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="../Style Library/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="../Style Library/css/demo.css">
        <link rel="stylesheet" type="text/css" href="../Style Library/css/set2.css">
        <link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"
</head>

<body>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript" ></script>
        <div class="container">

            <div class="content">
                <h2>Goliath</h2>
                <div class="grid">
                    <figure class="effect-goliath">
                        <img src="Site%20Documents/23.jpg" alt="img23"/>
                        <figcaption>
                            <h2>Thoughtful <span>Goliath</span></h2>
                            <p>When Goliath comes out, you should run.</p>
                            <a href="#">View more</a>
                        </figcaption>           
                    </figure>
                    <figure class="effect-goliath">
                        <img src="Site%20Documents/24.jpg" alt="img24"/>
                        <figcaption>
                            <h2>Thoughtful <span>Goliath</span></h2>
                            <p>When Goliath comes out, you should run.</p>
                            <a href="#">View more</a>
                        </figcaption>           
                    </figure>
                </div>
        </div><!-- /container -->

    </body>
</html>

在 Chrome 中正常工作（光标悬停在右侧面板上）

在 MSIE 11 中，无法正常工作:(

【问题讨论】：

叹息，“在 IE 中不起作用”有很多问题......自从 IE7 以来，这一直是大多数 Web 开发人员的祸根......您是否尝试过将 IE 置于边缘模式？ <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 在 IE 中的 javascript 控制台或查看 CSS 源代码时，您是否遇到任何错误？
您能指导我们使用笔或页面以便我们检查吗？
@MichaelDibbets，边缘模式没有解决它 - 仍然看到问题。没有 JS 错误，或者当我使用开发工具查看源代码时。
@Vandervals，抱歉，该页面未在任何地方公开托管...

标签： javascript html css

【解决方案1】：

将您的标记放入W3C HTML Validator 并修复所有错误。 Internet Explorer 尤其不喜欢无效的 HTML 标记，并且您有一个未关闭的 <div> 元素等等。

您的最后一个 <link> 标记缺少右括号 >。

<link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"

在触发 W3C 错误 href="../Style Library/css/normalize.css" 的 CSS 路径的 URL 的 href 中有一个空格字符。尝试通过重命名它来摆脱它。 Play it safe and avoid whitespace within any URL.
您从未具体说明 Explorer 的版本。

【讨论】：