demo++官网重构

第一个正式接手的 PC+移动响应式的项目，正好可以补一补之前对于浏览器兼容的不熟悉，把一些重要的点积累下来。

万恶的 IE

这个项目需要兼容到 IE9，算是不幸中的万幸，大部分 css3 的属性都可以很好的实现。以下是针对 IE 浏览器的 html 代码举例： tips: IE10 以上浏览器不支持条件注释。

条件注释判断浏览器版本
<!--[if !IE]><!--><!--<![endif]-->除IE外都可识别
<!--[if IE]><![endif]-->所有的IE可识别
<!--[if IE 9]><![endif]-->仅IE9可识别
<!--[if lt IE 9]><![endif]-->IE9以及IE9以下版本可识别
<!--[if gte IE 9]><![endif]-->IE9以及IE9以上版本可识别

通过这些条件注释，就可以在 IE 版本过低时选用另一套样式或者是显示提示浏览器升级的页面。关爱前端程序猿，从舍弃低版本 IE 做起，从升级浏览器做起。

<meta name="renderer" content="webkit">

用来定义浏览器的渲染模式，对于国产浏览器的双核来说，可以强制使用 webkit 引擎来渲染页面。

css3 渐变

很遗憾这个属性只支持 IE10 及以上的版本，对于 IE9 及以下版本的浏览器就只能使用图片或者牺牲一下设计效果的纯色背景了。

图片的小技巧

对于网页上图片的显示，最基本的有两种方式，一种是 img 标签，一种是背景图片。 img 标签中的图片用户是可以进行一些操作的，例如拖拽点击等，而背景图则不可以。

拼图的实现

有一个部分是实现几个不规则长宽的拼接，暂时使用纯 css 利用浮动和定位实现，但是显得不够优雅，复用性也很差，还需要继续研究，必要时利用 js 实现一个小小的拼图组件。

对大屏的自适应方案

<script>
    var screenHeight = window.screen.width
    if(window.screen.width > 1400) {
        document.body.style.zoom = (screenHeight * 0.874) / 1200;
    }
</script>

以上代码嵌入body标签之间即可实现高分屏上的自适应，相对媒体查询来说更简洁易用一些。在 IE 下 zoom 属性会导致整个页面放大，出现滚动条，不适用。、在 FF 下无 zoom 属性，需要更冗杂的 hack，经过比较决定采用媒体查询。

IE 图片链接的边框问题

类似以下代码的图片链接，在 IE 浏览器下会出现难看的边框，设置 img 的 border 属性为 0 或 none 即可。

<a href="##"><img src="XX.png" alt=""></a>

发送验证码倒计时

	var wait = 30;
    function countDown(button) {
        if (button.html() == '0s后重新发送') {
            button.prop("disabled", false);
            button.html("发送验证码");
            wait = 30;
        } else {
            button.prop("disabled", true);
            button.html(wait + 's后重新发送');
            wait--;
            setTimeout(function() {
                countDown(button);
            },
            1000);
        }
    }

移动端 overflow-x 坑

直接在 body 上设置是无法阻止原生的 touch 事件的，如果有图片或内容超出宽度会出现横向滚动的 bug，在相应内容的父级 div 上设置 overflow-x 即可。

推荐订阅源

一颗小树