面试5

1.html5中video支持哪些视频格式

一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

注：Internet Explorer 8 以及更早的版本不支持（h5c3）

IE      Firefox      Opera      Chrome      Safari

Ogg      No     3.5+      10.5+      5.0+       No

MPEG4   9.0+      No       No        5.0+       3.0+

WebM     No      4.0+      10.6+     6.0+       No

NO：代表不支持这款浏览器。

X.0+：表示支持这款及版本更高的浏览器。

使用Google的html5shiv包解决IE8一下不支持html5的问题

2.项目基于哪些浏览器开发（主流浏览器的兼容问题）

IE     Firefox      Opera      Chrome      Safari

兼容性问题记常见的：

*内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden

*CSS选择器区分
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。
/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;} 

*IE8不支持透明背景色
设置滤镜
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#44000000,endColorstr=#44000000);

*innerText 和 innerContent
     1）innerText 和 innerContent 的作用相同
     2）IE8之前的浏览器只支持innerText 
     3）老版本的Firefox只支持innerContent
     4）新版本的浏览器两种方式都支持
// 老版本浏览器兼容  innerText 和 innerContent
  if (element.textContent) {
        return element.textContent ;
   } else {
       return element.innerText;
   }

*获取兄弟节点/元素的兼容性问题
 1）兄弟节点，所有浏览器都支持
①nextSibling 下一个兄弟节点，可能是非元素节点；会获取到文本节点②previousSibling  上一个兄弟节点，可能是非元素节点；会获取到文本节点
 2）兄弟元素，IE8以前不支持
①previousElementSibling 获取上一个紧邻的兄弟元素，会忽略空白
②nextElementSibling  获取下一个紧邻的兄弟元素，会忽略空白

//兼容浏览器
// 获取下一个紧邻的兄弟元素
function getNextElement(element) {
   // 能力检测
  if(element.nextElementSibling) {
      return element.nextElementSibling;
   } else {
         var node = element.nextSibling;
         while(node && node.nodeType !== 1) {
                 node = node.nextibling;
         }
         return node;
    }
 }