详解HTML5浏览器兼容性解决方案


本文摘自PHP中文网,作者黄舟,侵删。

目前大部分浏览器均支持HTML5。但是部分低版本的浏览器对HTML5支持存在一些问题。

低版本浏览器支持HTML5

所有浏览器 ,对无法识别的元素会作为内联元素自动处理。因此可以采用如下方法教会浏览器 处理 “未知” 的 HTML 元素。

将 HTML5 元素定义为块元素

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

1

2

header, section, footer, aside, nav, main, article, figure {    display: block;

}

为 HTML 添加新元素

下面的实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myElement>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html><html><head><meta charset="utf-8">

  <title>为 HTML 添加新元素</title>

  <script>document.createElement("myElement")</script>

  <style>

  myElement{   

  display: block;   

  background-color: #ddd;   

  padding: 50px;   

  font-size: 30px; 

  }

  </style>

  </head>

  <body>

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

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

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

  </body>

  </html>

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

Internet Explorer 浏览器问题

你可以使用以上方法为浏览器添加新的元素,但是IE8及以下版本无法支持此种方式。
我们可以使用 Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, ” shiv” 来解决该问题:

阅读剩余部分

相关阅读 >>

h5怎样唤醒app

HTML5实现一个简单的钟表外观

详解HTML5之pushstate、popstate操作history无刷新改变当前url代码实例

h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter

HTML5 表单、select 下拉、textarea多行文本的介绍

HTML5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)

使用HTML5中的localstorage实现记住密码功能

HTML5 常用语法一览

HTML5 canvas实现文本对齐的代码总结

分享一个HTML5电子杂志翻书特效代码

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...