认识HTML5浏览器支持问题

最新推荐文章于 2021-07-02 08:06:20 发布

Big邓锋

最新推荐文章于 2021-07-02 08:06:20 发布

阅读量229

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin8feng/article/details/106142596

版权

HTML5浏览器支持

在HTML5中，你可以让一些较早（不支持HTML5）的浏览器支持HTML5。
此外，所有浏览器，包括旧的和最新的，无法识别的HTML5的元素自动处理。
现代的浏览器都支持HTML5。

将HTML5元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

<style>
        header, section, footer, aside, nav, main, article, figure 
        {
        display: block; 
        }
</style>

完美的 Shiv 解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>渲染 HTML5</title>
    <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>

<body>

    <h1>完美的 Shiv 解决方案</h1>

    <article>
        学习是一种信仰，学的不仅是技术，更是梦想！
    </article>

</body>

</html>

<article> 标签是 HTML 5 中的新标签，以下代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
 <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。

为 HTML 添加新元素

该实例为 HTML 添加的新的元素，并为该元素定义样式，元素名为 <newelement> ：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>为 HTML 添加新元素</title>
    <script>
        document.createElement("newelement")
    </script>
    <style>
        newelement {
            display: block;
            padding: 50px;
            background-color: #ddd;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <h1>我的第一个标题</h1>

    <p>我的第一个段落。</p>

    <newelement>我的第一个新元素</newelement>

</body>

</html>

JavaScript 语句 document.createElement(“newelement”) 是为 IE 浏览器添加新的元素。

Big邓锋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识HTML5浏览器支持问题

HTML5浏览器支持在HTML5中，你可以让一些较早（不支持HTML5）的浏览器支持HTML5。此外，所有浏览器，包括旧的和最新的，无法识别的HTML5的元素自动处理。现代的浏览器都支持HTML5。将HTML5元素定义为块元素HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:<style> header, sect
复制链接

扫一扫