本文不考虑兼容 IE6
我是名前端实习生,刚上班没多久就遇到了一个很赶的项目,要求我为大量的页面做CSS兼容,以前我自学的时候,折腾过 CSS Hack,没想到业务中的情况更加复杂。因为工作量有点大, 而公司只有我一个前端...我怕我之前学到的皮毛不够规范、不够清晰,会带来潜在的问题,所以匆忙整理笔记的时候,发现现在网上很多CSS Hack大全之类的教程都有点旧,普遍在 IE9 之后的时间都没有更新了,所以今天来请教一下。
首先我之前学习的时候,我是把浏览器兼容分为 Firefox 标准、Chrome 标准 和 IE7 标准,一般情况下我会写一个适合 IE7 (或者说绝大部分 IE 版本)的 CSS( .name{}),然后再根据 Firefox ( @-moz-document url-prefix(){.name{}})或者 Chrome ( @media screen and (-webkit-min-device-pixel-ratio:0){.name{}})去调整
所以 1、请问按照普遍网民的浏览器使用情况,我这样的分配兼容方案和CSS Hack写法合理不?如果不合理的话,应该怎么规范地分配和编写?
还有今天发现,同一个网页有个 ul 的长度,我在我的 Windows10 + IE11中是设置了宽度为 215px ,但是在经理的 Windows7 + IE11 中却短了足足 20px ,我的 IE 版本是11.192,更新版本为11.0.29,而经理的 IE 版本是 11.0 更新版本为11.0.29,难道 IE11 也有很多个版本? 2、遇到这种情况该如何处理?
谢谢指教!
1. 实践出真知,你只有模拟不同的环境,看看能否达到这样的效果
2. 真没碰到过这样的情况,不过,你可以看看你经理的浏览器有没有放大或缩小,我曾经就碰到过类似情况,字体变大了,但表格宽度不变,结果导致标题换行,想半天没想出原因,后来一看,浏览器被放大到110%,恢复后一切正常
1. 实践出真知,你只有模拟不同的环境,看看能否达到这样的效果
2. 真没碰到过这样的情况,不过,你可以看看你经理的浏览器有没有放大或缩小,我曾经就碰到过类似情况,字体变大了,但表格宽度不变,结果导致标题换行,想半天没想出原因,后来一看,浏览器被放大到110%,恢复后一切正常
找一个 CSS Reset, 一般情况下,不用比较新的CSS属性的话,不需要自己写Hack。要么用CSS框架看看。
想问一下用什么东西可以模拟各种浏览器的环境呢
想问一下用什么东西可以模拟各种浏览器的环境呢
用 IE texter 去调试 这样就会知道每个浏览器的不同
用 IE texter 去调试 这样就会知道每个浏览器的不同
兼容性问题应当分下轻重缓急,列出最重要的来。