兼容性问题总结

兼容性问题：

一、CSS兼容性

1.felx布局在iOS8上有问题。解决：加-webkit前缀

2.ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度 。解决：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

3.几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。解决：使用float属性为img布局

4.透明度的兼容css设置：ie6认识的hacker 是下划线_ 和星号 *  ie7 遨游认识的hacker是星号 *

5.不同浏览器的标签默认的外补丁和内补丁不同，即随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 解决： *{margin:0;padding:0;}

6.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置大。解决：在float的标签样式控制中加入 display:inline;将其转化为行内属性

7.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug。解决：在display:block;后面加入display:inline;display:table;

8.标签最低高度设置min-height不兼。解决：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

9.谷歌浏览器不支持字体小于12px。解决：可以使用css3属性对文字进行缩放处理，使用transform:scale()。

10.IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容；解决：哪个需要设置overflow；hidden，生效，就在哪个父级上面设置position:relative;

11.谷歌、ie浏览器默认空格（ ）宽度不一的问题。解决：设置相同字体 font-family:"宋体";

12.<div class="clear"></div>在ie6中存在默认空白问题；解决：.clear{font-size:0;line-height:0;height:0;}

13.块级元素上加悬停在ie6上不显示；

解决：

body{  behavior:url(csshover.htc);}

<!--[if lte IE 6]>  <![endif]--> 

IE6及其以下版本可见 

<!--[if lte IE 7]>  <![endif]--> 

IE7及其以下版本可见 

<!--[if IE 6]>      <![endif]--> 

只有IE6版本可见 

<![if !IE]>         <![endif]> 

除了IE以外的版本 

<!--[if lt IE 8]>   <![endif]--> 

IE8及其以下的版本可见 

<!--[if gte IE 7]>  <![endif]--> 

IE7及其以下的版本可见

14.png-24格式的背景图片在ie6中显示灰色；解决：

< !--[if IE 6]>

<script src="DD_belatedPNG.js"></script><script> DD_belatedPNG.fix('.png_bg');</script>

<![endif]-->

15.圆形头像的制作兼容

圆形头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明。

这里需要注意的是需要把图片保存成24位的png，虽然IE6支持8位的png的透明，但是8位的png做透明圆弧图片存在效果上的问题，就是存在白色的杂边或锯齿。24位的png或32位的png的圆弧透明（半透明）图片则非常光滑，但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持)，需要我们额外的一下处理；使用 AlphaImageLoader就可以解决IE6不能显示24位和32位PNG的透明，

但使用 AlphaImageLoader 筛选器的元素必须有宽高，width:XXpx; height:XXpx;ie6下必须充值背景为none，_background:none

<style>

#test{position:relative; top:0; left:0;width:300px;height:300px;background:#000;}

#test span{position:absolute; top:0; left:0;width:200px;height:200px;background:url("路径/中间透明的图片.png");color:#fff;_background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="路径/中间透明的图片.png",sizingMethod="crop"); display:block;}

</style>

<div id="test"><img src="图片地址" width="200" height="200" /><span></span></div>

16.使三列、两列div背景等高

补差等高法

<div class="content">

<div class="left"></div>

<div class="right"></div>

</div>

.content{overflow:hidden;}

.left, .right{margin-bottom:-10000px;padding-bottom:10000px;}

这也是负margin的一个应用。这种方法是有一个缺点，就是当其中有出现锚点的时候，会出现锚点跳转错位的问题。

可能有的公司也会不让使用这个方法，因为margin、padding数值过大；

还有种折中的方法是使用背景图片达到页面基本的等高，这个大家应该懂得吧。

17.谷歌浏览器css hack解决（只有谷歌、苹果浏览器识别）

    @media screen and (-webkit-min-device-pixel-ratio:0) {  

     /*这里放新建的CSS选择器*/ 

     } 

二、JS兼容性

1. children与childNodes

IE提供的children、childNodes和firefox下的childNodes的行为是有区别的，firefox下childNodes会把换行和空白字符都算作父节点的子节点，而IE的childNodes和children不会。比如：

<div id="dd">

<div>yizhu2000</div>

</div>

d为dd的div在IE下用childNodes查看，其子节点数为1，而ff下为三，我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做：

if (typeof(HTMLElement) != "undefined" && !window.opera) {

HTMLElement.prototype.__defineGetter__("children", function() {

for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {

n = this.childNodes[i];

if (n.nodeType == 1) {

a[j++] = n;

if (n.name) {

if (!a[n.name])

a[n.name] = [];

a[n.name][a[n.name].length] = n;

}

if (n.id)

a[n.id] = n;

}

}

return a;

});

}

2. firefox和ie的事件

window.event只能在IE下使用，而不能用在Firefox下，这是因为Firefox的event只能在事件发生的现场使用。 Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event。

比方说下面这个在ie下获得鼠标位置的方法：

<button onclick="onClick()" >获得鼠标点击横坐标</button>

<script type="text/javascript">

function onclick(){

alert(event.clientX);

}

</script>

需要改成

<button onclick="onClick(event)">获得OuterHTML</button>

<script type="text/javascript">

function onclick(event){

event = event || window.event;

alert(event.clientX);

}

</script>

var eventObj=ev||event

才能在两种浏览器下使用

3.HTML对象获取问题

FireFox获取方式document.getElementById("idName")

ie使用document.idname或者document.getElementById("idName")

解决办法：统一使用document.getElementById("idName");

4. const问题

在Firefox下，可以使用const关键字或var关键字来定义常量；

IE下，只能使用var关键字来定义常量；

解决方法：统一使用var关键字来定义常量。

5.frame问题

以下面的frame为例：

1<frame src="xxx.html" id="frameId" name="frameName" />

a)访问frame对象

IE：使用window.frameId或者window.frameName来访问这个frame对象，frameId和frameName可以同名；

Firefox：只能使用window.frameName来访问这个frame对象；

另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象；

b) 切换frame内容

在 IE和Firefox中都可以使用

window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"

来切换frame的内容；

如果需要将frame中的参数传回父窗口（注意不是opener，而是parent），可以在frame中使用parent来访问父窗口。例如：

parent.document.form1.filename.value="Aqing";

6. body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在；

7. firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement

firefox：obj.parentNode

解决方法：因为firefox与IE都支持DOM，因此全部使用obj.parentNode

8.innerText的问题

innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；

解决方法：innerHTML

if (navigator.appName.indexOf("Explorer") > -1) {

document.getElementById('element').innerText = "my text";

} else {

document.getElementById('element').textContent = "my text";

}

9.AJAX获取XMLHTTP的区别

var xmlhttp;

if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

} elseif (window.ActiveXObject) { // IE的获取方式

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

注意：在IE中，xmlhttp.send(content)方法的content可以为空，而firefox则不能为null，应该用send("")，否则会出现411错误。

var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP)

10. event.x与event.y问题

  (1)现有问题：在IE中，event对象有x,y 属性，Firefox中没有。

  (2)解决方法：在Firefox中，与event.x 等效的是 event.pageX。可以使用：

      mX = event.x ? event.x : event.pageX;

GIT问题总结

1.CVS及SVN都是集中式的版本控制系统，而Git是分布式版本控制系统

2.分布式版本控制系统与集中式版本控制系统有何不同：集中式版本控制系统，版本库是集中存放在中央服务器的，而干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的活推送给中央服务器。集中式版本控制系统最大的毛病就是必须联网才能工作，如果在局域网内还好，带宽够大，速度够快，可如果在互联网上，遇到网速慢的话，可能提交一个10M的文件就需要5分钟。

分布式版本控制系统根本没有“中央服务器”，每个人的电脑上都是一个完整的版本库，这样，你工作的时候，就不需要联网了，因为版本库就在你自己的电脑上。分布式版本控制系统的安全性要高很多，因为每个人电脑里都有完整的版本库，某一个人的电脑坏掉了不要紧，随便从其他人那里复制一个就可以了。而集中式版本控制系统的中央服务器要是出了问题，所有人都没法干活了。分布式版本控制系统通常也有一台充当“中央服务器”的电脑，但这个服务器的作用仅仅是用来方便“交换”大家的修改

3.安装

(1)下载安装

(2)$ git config --global user.name "Your Name"  $ git config --global user.email "email@example.com"

(3)通过git init命令把这个目录变成Git可以管理的仓库 发现当前目录下多了一个.git的目录，这个目录是Git来跟踪管理版本库的 如果你没有看到.git目录，那是因为这个目录默认是隐藏的，用ls -ah命令就可以看见

(4)添加文件到Git仓库，分两步：

第一步，使用命令git add <file>，注意，可反复多次使用，添加多个文件；

第二步，使用命令git commit，完成。

git status命令可以让我们时刻掌握仓库当前的状态

git diff顾名思义就是查看difference，显示的格式正是Unix通用的diff格式

git log命令显示从最近到最远的提交日志，我们可以看到3次提交,有时间戳  如果嫌输出信息太多，看得眼花缭乱的，可以试试加上--pretty=oneline参数  你看到的一大串类似3628164...882e1e0的是commit id（版本号）

版本回退

git  reset  版本回滚  --hard  Git的版本回退速度非常快，因为Git在内部有个指向当前版本的HEAD指针，当你回退版本的时候，Git仅仅是把HEAD从指向append GPL改为指向add distributed 然后顺便把工作区的文件更新了

git reflog用来记录你的每一次命令

工作区和暂存区

Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念

工作区有一个隐藏目录.git，这个不算工作区，而是Git的版本库

Git的版本库里存了很多东西，其中最重要的就是称为stage（或者叫index）的暂存区，还有Git为我们自动创建的第一个分支master，以及指向master的一个指针叫HEAD。

git diff HEAD -- readme.txt命令可以查看工作区和版本库里面最新版本的区别

管理修改

git checkout -- file可以丢弃工作区的修改

命令git checkout -- readme.txt意思就是，把readme.txt文件在工作区的修改全部撤销，这里有两种情况：

一种是readme.txt自修改后还没有被放到暂存区，现在，撤销修改就回到和版本库一模一样的状态；

一种是readme.txt已经添加到暂存区后，又作了修改，现在，撤销修改就回到添加到暂存区后的状态。

总之，就是让这个文件回到最近一次git commit或git add时的状态。

撤销修改

git reset HEAD file可以把暂存区的修改撤销掉（unstage），重新放回工作区

git checkout其实是用版本库里的版本替换工作区的版本，无论工作区是修改还是删除，都可以“一键还原”。

删除文件

命令git rm用于删除一个文件。如果一个文件已经被提交到版本库，那么你永远不用担心误删，但是要小心，你只能恢复文件到最新版本，你会丢失最近一次提交后你修改的内容。

添加远程库

要关联一个远程库，使用命令git remote add origin git@server-name:path/repo-name.git；

关联后，使用命令git push -u origin master第一次推送master分支的所有内容；

此后，每次本地提交后，只要有必要，就可以使用命令git push origin master推送最新修改；

分布式版本系统的最大好处之一是在本地工作完全不需要考虑远程库的存在，也就是有没有联网都可以正常工作，而SVN在没有联网的时候是拒绝干活的！当有网络的时候，再把本地提交推送一下就完成了同步，真是太方便了！

从远程库克隆

要克隆一个仓库，首先必须知道仓库的地址，然后使用git clone命令克隆。

Git支持多种协议，包括https，但通过ssh支持的原生git协议速度最快

创建与合并分支

查看分支：git branch

创建分支：git branch <name>

切换分支：git checkout <name>

创建+切换分支：git checkout -b <name>

合并某分支到当前分支：git merge <name>

删除分支：git branch -d <name>

解决冲突

当Git无法自动合并分支时，就必须首先解决冲突。解决冲突后，再提交，合并完成。

用git log --graph命令可以看到分支合并图。

分支管理策略

Git分支十分强大，在团队开发中应该充分应用。

合并分支时，加上--no-ff参数就可以用普通模式合并，合并后的历史有分支，能看出来曾经做过合并，而fast forward合并就看不出来曾经做过合并。

Bug分支

当手头工作没有完成时，先把工作现场git stash一下，然后去修复bug，修复后，再git stash pop，回到工作现场。

需要恢复，有两个办法：

一是用git stash apply恢复，但是恢复后，stash内容并不删除，你需要用git stash drop来删除；

另一种方式是用git stash pop，恢复的同时把stash内容也删了：

Feature分支

开发一个新feature，最好新建一个分支；

如果要丢弃一个没有被合并过的分支，可以通过git branch -D <name>强行删除。

多人协作

要查看远程库的信息，用git remote  用git remote -v显示更详细的信息

在本地创建和远程分支对应的分支，使用git checkout -b branch-name origin/branch-name，本地和远程分支的名称最好一致

多人协作的工作模式通常是这样：

1.首先，可以试图用git push origin branch-name推送自己的修改；

2.如果推送失败，则因为远程分支比你的本地更新，需要先用git pull试图合并；

3.如果合并有冲突，则解决冲突，并在本地提交；

4.没有冲突或者解决掉冲突后，再用git push origin branch-name推送就能成功！

如果git pull提示“no tracking information”，则说明本地分支和远程分支的链接关系没有创建，用命令git branch --set-upstream branch-name origin/branch-name。

创建标签

命令git tag <name>用于新建一个标签，默认为HEAD，也可以指定一个commit id；

git tag -a <tagname> -m "blablabla..."可以指定标签信息；

git tag -s <tagname> -m "blablabla..."可以用PGP签名标签；  签名采用PGP签名，因此，必须首先安装gpg（GnuPG），如果没有找到gpg，或者没有gpg密钥对，就会报错

用命令git show <tagname>可以看到说明文字

命令git tag可以查看所有标签。

操作标签

命令git push origin <tagname>可以推送一个本地标签；

命令git push origin --tags可以推送全部未推送过的本地标签；

命令git tag -d <tagname>可以删除一个本地标签；

命令git push origin :refs/tags/<tagname>可以删除一个远程标签。

使用GitHub

在GitHub上，可以任意Fork开源仓库；（git clone git@github.com:michaelliao/bootstrap.git）

自己拥有Fork后的仓库的读写权限；

可以推送pull request给官方仓库来贡献代码

在本地库上使用命令git remote add把它和码云的远程库关联：git remote add origin/git remote add github/git remote add gitee

删除已关联的名为origin的远程库：git remote rm origin

用git remote -v查看远程库信息

忽略特殊文件

忽略某些文件时，需要编写.gitignore；

.gitignore文件本身要放到版本库里，并且可以对.gitignore做版本管理

.gitignore写得有问题，需要找出来到底哪个规则写错了，可以用git check-ignore命令检查

配置别名

用st表示status：git config --global alias.st status  加上--global是针对当前用户起作用的，如果不加，那只针对当前的仓库起作用

搭建Git服务器

搭建Git服务器非常简单，通常10分钟即可完成；

要方便管理公钥，用Gitosis；

要像SVN那样变态地控制权限，用Gitolite。

第一步，安装git

第二步，创建一个git用户，用来运行git服务

第三步，创建证书登录

第四步，初始化Git仓库

第五步，禁用shell登录

第六步，克隆远程仓库

管理公钥

如果团队很小，把每个人的公钥收集起来放到服务器的/home/git/.ssh/authorized_keys文件里就是可行的。如果团队有几百号人，就没法这么玩了，这时，可以用Gitosis来管理公钥。

管理权限

有很多不但视源代码如生命，而且视员工为窃贼的公司，会在版本控制系统里设置一套完善的权限控制，每个人是否有读写权限会精确到每个分支甚至每个目录下。因为Git是为Linux源代码托管而开发的，所以Git也继承了开源社区的精神，不支持权限控制。不过，因为Git支持钩子（hook），所以，可以在服务器端编写一系列脚本来控制提交等操作，达到权限控制的目的。Gitolite就是这个工具。

闭包

闭包的作用就是在a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，因为a的内部函数b的执行需要依赖a中的变量。使用闭包主要是为了设计私有的方法和变量，闭包的优点是可以避免全局变量的污染缺点是闭包会常驻内存，会增加内存使用量，使用不当容易造成内存泄漏，在JS中，函数即闭包，只有函数才会产生作用域的概念。

闭包的三个特征：1.函数嵌套函数  2.函数内部可以引用外部的参数和变量  3.参数和变量不会被垃圾回收机制回收。

vue中微博的分享链接。可以用a标签的href属性实现，<a href=""

target="_blank"><img src="" alt="wechat">

a标签实现打电话功能就是在href=“tel”邮件是mailto: 短信是sms

世界主流浏览器及内核：IE trident firefox:gecko safari :webkit opera:presto