今天呢，我和一个关注我的朋友聊啦聊，他是个在自学前端的朋友，和我说啦下对浏览器兼容的问题

小七前端

以及js加载的顺序为什么有的在head里有的在body后，非常感谢这个朋友的提议。话不多说，今天小

七和大家分享下我对这些的理解。

1：浏览器默认的间距问题。

解决办法：引入一个reset的文件，这个文件是一个默认css重置文件，这个百度上可以搜到下载。

2：div被挤到下一行。

解决办法：可以把float的样式设置为行内标签（display:inline）;

3:图片会有默认间距

解决办法：把img加一个浮动标签。

4：解决ie版本的样式问题，可以用到hack写法

color:red; /* 所有浏览器可识别*/

_color:red; /* 仅IE6 识别 */

*color:red; /* IE6、IE7 识别 */

+color:red; /* IE6、IE7 识别 */

*+color:red; /* IE6、IE7 识别 */

[color:red; /* IE6、IE7 识别 */

color:red\9; /* IE6、IE7、IE8、IE9 识别 */

color:red\0; /* IE8、IE9 识别*/

color:red\9\0; /* 仅IE9识别 */

color:red \0; /* 仅IE9识别 */

color:red!important; /* IE6 不识别!important 有危险*/

前面或后面的符合或数字或\表示的是指在某个版本下的写法，就是其他版本会不起作用，这个可以针对你在那个IE版本调什么样式。

5：透明度属性的兼容问题，ie和其他浏览器是不一样的

解决办法：标准浏览器：opacity: 0.5; IE：filter: alpha(opacity = 50);

6：无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：

解决办法：overflow:hidden zoom:0.08 line-height:1px

当然还有很多问题，但我也记不太清除啦 比如说IE6的阶梯浮动，但现在IE6基本上公司已经不考虑啦。

我先大概和大家说一下我避免浏览器兼容的要点，这个只是我的办法。

第一：布局的时候一定要清清楚楚的先在大脑里构造好布局你要什么样的布局，先想好在做。

第二：div闭合标签问题，一个div有起有尾,千万不能丢失或者遗漏，有可能会出现大问题，而且并不好找。

第三：浮动的时候注意 如果浮动完 必须清楚浮动，要么之后的元素会顶上去。

还有做网站有的为什么拖动浏览器窗口不会变乱 这点写法也要注意一下。

比如一个div里面包含元素 这个div尽量不要去设置宽度 用padding或者margin去撑开，着样你不论怎么拖动浏览器窗口都不会乱，但最小宽度一定要设置一个。

做移动端网站注意的：元素不需要高度，不需要高度，不需要高度，重要的事情说三遍。很多元素都不是你能决定里面会有多少东西，

是通过后台返回的数据判断的，所以你做的只需要给他加一个paadding 或者margin 千万不要加高度。

然后说一个小技巧 后台遍历li的时候，如果li有下划线，但是加载出来的数据都有怎么去把最后一条的li下划线去掉，可以用到css的last选择器：用法是ul:li:last-child{}；

小七前端

js加载顺序的问题。

浏览器解析html文件是从上到下的，如果把js引入放在head里面，那浏览器会先把js文件解析完毕然后在去解析body里面的东西，所以很可能获取元素内容的时候会未定义。

可能很多人会说 我没有出现过这种问题，那是因为你写js的时候加入啦 windows.onload=function(){},这个壳的意思是指当全部的html解析完成之后在去解析js里的代码。

我建议大家把js引入的时候放在body之后，因为如果js文件比较大的话，浏览器会先去解析js文件，会影响网页的加载速度。

今天小七和大家分享的就这么多，双十二刚过，大家剁手没。

谢谢关注，嘿嘿。