Open chunpu opened 9 years ago
今天刚到公司，主管就表示今天的任务之一是适配各浏览器，该来的总是要来，从接触前端开始我就没用过低版本IE了，因为网上以及前辈都说IE太恶心，在各种招聘中也充斥着不需要兼容IE6的诱人条件也表明IE兼容难度极大。不幸的是我负责模板制作(很多专题页都来自模板，因为专题由编辑负责，一个事情一出，一般两小时要搞定，这种时候完全靠模板生成专题页)，因此模板必须要兼容IE6。
测试人员打开IE6，果然之前排版好的界面完全爆了，我虽不懂IE6，但也知道它不支持border-box, 因此写的是content-box的网格，但布局依然是完全混乱
border-box
content-box
首先是导航栏挂了,position: fixed;， IE6妥妥的是不兼容这个属性的，这个时候的唯一解决方案就是IE6上的导航栏不随页面滚动，其他方案都太复杂了，事实上我看了几个大网站页面，都是支持fixed就fix，不支持的就不管
position: fixed;
第二是导航栏和内容没有居中，这让我有点奇怪了，在我有限的css知识中，只要是width: ***px; margin: 0 auto;就可以居中，用起来很顺手，IE怎么不居中呢？我问了几个前辈和网友居然没人知道为什么，不过我给父元素添加text-align: center;后就成功居中了。
width: ***px; margin: 0 auto;
text-align: center;
我说这个text-align的时候还被嘲笑了，他们说text-align是行内元素的对齐方式，怎么可能让整个块居中呢？但我确实是加上后可以居中的，并且用真机试验了，其实这个上网一搜就知道原因，CSS1规范中，text-align仅应用于块级元素，而在CSS2.1中则相反，text-align仅支持行内元素，而IE6则几乎不支持CSS2.1，因此加上text-align可以实现IE6居中是非常合理的(不过各大牛依然坚持不需要text-align, 可能还是我写错了。。)
text-align
做一个可点击的img是非常常见的需求，也就是img套一个a标签，同时不少时候我们也需要图片和它下面的一行信息一起都是可以点击的，这时候往往a中套一个img和居中的span，如果在a中先套一个div， 再在div中加上img span，就会出现img不可点的情况，目前仅在IE6上发现。可见IE6中a里面还是不要放块级元素为好
最大的一个错误就是我整个布局错了，这是绝对不能忍的，如果是什么border-radius， 或者shadow等出错，这都是无伤大雅的，但布局不能错。IE6的问题就是我明明按content-box计算好的宽度和margin， 怎么就掉下去了呢？
查bug的时候我注意到，浮动的元素，第一个总是保持比后排向右移两倍的差距，我猜是不是margin算了两次啊，上网搜了下double margin IE6这样关键字，果然这是一个bug
幸好解决方法很简单，在所有float: left这样的浮动布局后面再加一个-display: inline;的IE hack，就完美解决了
float: left
-display: inline;
在IE6和IE7下会碰到oveflow hidden失效的问题, 只需在overflow: hidden;后面紧接着加上position: relative;即可
overflow: hidden;
position: relative;
在修复IE6中兼容bug的时候感觉成就感很强，并不如网上所说的那样可怕，而且只要了解大致的原理，做出兼容IE6的网站并不太难，甚至只要加几行CSS就行，很少需要去改HTML结构，不过这可能也是我还没接触到复杂状况的原因，非常期待其他的bug
今天刚到公司，主管就表示今天的任务之一是适配各浏览器，该来的总是要来，从接触前端开始我就没用过低版本IE了，因为网上以及前辈都说IE太恶心，在各种招聘中也充斥着不需要兼容IE6的诱人条件也表明IE兼容难度极大。不幸的是我负责模板制作(很多专题页都来自模板，因为专题由编辑负责，一个事情一出，一般两小时要搞定，这种时候完全靠模板生成专题页)，因此模板必须要兼容IE6。
测试人员打开IE6，果然之前排版好的界面完全爆了，我虽不懂IE6，但也知道它不支持
border-box, 因此写的是content-box的网格，但布局依然是完全混乱fixed
首先是导航栏挂了,
position: fixed;， IE6妥妥的是不兼容这个属性的，这个时候的唯一解决方案就是IE6上的导航栏不随页面滚动，其他方案都太复杂了，事实上我看了几个大网站页面，都是支持fixed就fix，不支持的就不管居中
第二是导航栏和内容没有居中，这让我有点奇怪了，在我有限的css知识中，只要是
width: ***px; margin: 0 auto;就可以居中，用起来很顺手，IE怎么不居中呢？我问了几个前辈和网友居然没人知道为什么，不过我给父元素添加text-align: center;后就成功居中了。我说这个
text-align的时候还被嘲笑了，他们说text-align是行内元素的对齐方式，怎么可能让整个块居中呢？但我确实是加上后可以居中的，并且用真机试验了，其实这个上网一搜就知道原因，CSS1规范中，text-align仅应用于块级元素，而在CSS2.1中则相反，text-align仅支持行内元素，而IE6则几乎不支持CSS2.1，因此加上text-align可以实现IE6居中是非常合理的(不过各大牛依然坚持不需要text-align, 可能还是我写错了。。)img外不应添加div
做一个可点击的img是非常常见的需求，也就是img套一个a标签，同时不少时候我们也需要图片和它下面的一行信息一起都是可以点击的，这时候往往a中套一个img和居中的span，如果在a中先套一个div， 再在div中加上img span，就会出现img不可点的情况，目前仅在IE6上发现。可见IE6中a里面还是不要放块级元素为好
double margin
最大的一个错误就是我整个布局错了，这是绝对不能忍的，如果是什么border-radius， 或者shadow等出错，这都是无伤大雅的，但布局不能错。IE6的问题就是我明明按content-box计算好的宽度和margin， 怎么就掉下去了呢？
查bug的时候我注意到，浮动的元素，第一个总是保持比后排向右移两倍的差距，我猜是不是margin算了两次啊，上网搜了下double margin IE6这样关键字，果然这是一个bug
幸好解决方法很简单，在所有
float: left这样的浮动布局后面再加一个-display: inline;的IE hack，就完美解决了overflow hidden失效
在IE6和IE7下会碰到oveflow hidden失效的问题, 只需在
overflow: hidden;后面紧接着加上position: relative;即可总结
在修复IE6中兼容bug的时候感觉成就感很强，并不如网上所说的那样可怕，而且只要了解大致的原理，做出兼容IE6的网站并不太难，甚至只要加几行CSS就行，很少需要去改HTML结构，不过这可能也是我还没接触到复杂状况的原因，非常期待其他的bug