Question

我使用HTML5属性在文本框验证时显示警报消息。它在Chrome上工作正常但在IE8上却没有。我还添加了html5shiv.js但实际上并没有解决...... PFB我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<script src="html5shiv.js"></script>


<script>
$(document).ready(function () {
    var element = document.getElementById("name");

        element.oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
               e.target.setCustomValidity("The field 'From' cannot be left blank");

            }
        };

})
</script>
</head>
<body>
<form>
<label>From:<input name="username" id="name" type="text" placeholder="Eg. Town Hall"  required="true" autofocus="true"/></label>
<input type="submit" value="go" />
</form>
</body>
</html>

Answer 1

IE8并未完全支持HTML5属性来检查更多click here。

IE8仅支持以下列表

动态标记插入
outerHTML属性
insertAdjacentHTML function
运行时脚本错误报告
自定义搜索提供商
API
编辑文件
编辑元素

Answer 2

html5shiv.js允许您在IE中设置html5标签的样式，但它不会启用HTML5中引入的各种属性。您需要找到各种JS解决方案之一来模拟IE8中的placeholder。

Answer 3

HTML5正变得越来越流行，这有一些问题。如果你想支持一些仍在使用的旧版浏览器，比如IE8及更低版本，那么使用HTML5就会遇到麻烦。

Internet Explorer 8和Lower

IE8和较低浏览器的问题在于它们是在几年前创建的任何新HTML5标签之前创建的，因此它无法支持它们。微软不会发布这些浏览器的更新，因为他们已经创建了IE9，因此他们希望人们升级到这个。

如果人们没有升级，那么他们就会遇到过时的浏览器，这些浏览器无法支持这些新的HTML标签。

浏览器对文章，部分，hav，页眉，页脚的这些新标签一无所知，因此无法支持它们。如果您使用这些标记，则很可能是标记本身的样式，或者您必须在标记中添加一个类，这样就无法使用HTML5。

由于浏览器不了解这些标签，因此无法对其进行样式设置，因此您会发现在IE8或更低版本中，您的网站将没有多种样式。

正确使用HTML5 for IE

要让IE了解这些标记，您需要添加一些Javascript来创建元素，这可以通过使用以下代码段完成。

<script>
  document.createElement('header');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('footer');

但这不是一种好的工作方式，因为你必须记住将它包含在你网站的每个页面的顶部，然后如果你想添加一个新的HTML5元素，你必须回到每个页面到将其添加到。

您需要的是要包含的Javascript文件，它将创建这些元素。

Remy Sharp创建了一个Javascript文件，他在google代码中托管，可以为您执行此操作。

将以下内容复制到页面顶部，如果访问者使用的是低于第9版的IE浏览器，则会在您的网站上包含此代码文件。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</div>

参考Link

html 5组件在ie8中不起作用

3 个答案:

Internet Explorer 8和Lower

正确使用HTML5 for IE