gpt4 book ai didi

javascript - 悬停效果在 IE 中不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 23:16:11 24 4
gpt4 key购买 nike

尝试实现一个简单的悬停效果 - 它在 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 中正常工作(光标悬停在右侧面板上) Working correctly in Chrome (cursor hovered on the right panel)

在 MSIE 11 中,不工作 :( in MSIE 11, not working :(

最佳答案

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

  2. 你的最后一个<link>标签缺少右括号,> .

    <link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"
  3. 您在 href 中有一个空白字符触发 W3C 错误的 CSS 路径的 URL,href="../Style Library/css/normalize.css" .尝试通过重命名所需的一切来摆脱它。 Play it safe and avoid whitespace within any URL .

  4. 您从未具体说明 Explorer 的版本。

关于javascript - 悬停效果在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30460076/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com