记html2canvas采坑记，为何生成的canvas样式与html中的不同

目标：

1.想要让canvas中的图片正常显示，不能使用backgroundImage，而且最好不要使用div嵌套img标签，直接使用img。

2.能不使用定位就不使用定位（最好用margin、padding表现dom元素的位置），如果想使用，就在此定位元素外嵌套一个position：relative的标签。(大神告诉我用定位是最好的，下次测试一下，margin/padding需要计算的东西太多了)

3.chrome和别的浏览器生成的canvas关于样式的表现是不同的。

<section class="u-selection-wrap">
        <div class="shadow"></div>
        <div class="u-selection-poster-content" id="poster">
            <div class="u-box">
                <div class="cover-img">
                    <img alt="" src="http://img.saihuitong.com/8/img/22/153d136d872.jpg" class=" ">
                </div>
                <div class="title event-title">
                    <p class="bg">月重复的活动</p>
                    <p class="bg"></p>
                </div>
                <ul class="info">
                    <li class="address f28">
                        <i class="icon icon-address"></i> 辽宁 大连
                    </li>
                    <li class="time f28">
                        <i class="icon icon-calendar"></i> 03/22 — 07/29
                    </li>
                </ul>
                <p class="price">￥32
                </p>
                <div class="poster-bottom">
                    <div class="avatar">
                        <img alt="" src="http://st.saihuitong.com/res/img/avatars/system/4_ava025.jpg" class=" ">
                    </div>
                    <p class="sasname f28">小北户外</p>
                    <p class="info">扫描二维码和我一起去玩吧</p>
                    <div class="qrcode">

                    </div>
                </div>
            </div>
        </div>
    </section>

        .u-selection-wrap .shadow {
            position: absolute;
            z-index: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6);
        }

        .u-selection-wrap {
            position: fixed;
            z-index: 9;
            top: 0;
            bottom: 0;
            left: 0;
            padding-top: 88px;
            width: 100%;
        }

        .u-selection-wrap .u-selection-poster-content {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -312px;
            margin-top: -450px;
            z-index: 2;
            width: 624px;
            height: 900px;
            background: white;
            border-radius: 20px;
            box-sizing: border-box;
            padding: 20px;
        }

        .u-selection-wrap .u-selection-poster-content .cover-img {
            width: 582px;
            height: 388px;
            margin: 0 auto;
        }

        .u-selection-wrap .u-selection-poster-content .cover-img img {
            width: 100%;
            height: 100%;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
        }

        .cover-img {
            width: 582px;
            height: 388px;
            margin: 0 auto;
        }

        .cover-img img {
            width: 100%;
            height: 100%;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
        }

        .title {
            max-height: 88px;
            font-size: 30px;
            line-height: 42px;
            overflow: hidden;
            margin: 17px 0;
        }

        .info {
            color: #848484;
            line-height: 50px;
        }

        .price {
            margin-top: 20px;
            padding: 0 20px;
            height: 40px;
            background: rgba(253, 124, 103, 1);
            border-radius: 25px;
            line-height: 40px;
            font-size: 32px;
            color: #fff;
            display: inline-block;
        }

        .poster-bottom {
            position: absolute;
            bottom: 40px;
            width: 100%;
        }

        .avatar {
            position: absolute;
            bottom: 5px;
            width: 76px;
            height: 76px;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14);
            border: 4px solid rgba(255, 255, 255, 1);
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            background: #fff;

        }

        .avatar img {
            position: relative;
            width: 76px;
            height: 76px;
            border-radius: 50%;
        }

        p {
            position: relative;
            margin-left: 100px;
        }

        .qrcode {
            position: absolute;
            bottom: 0;
            right: 40px;
            height: 102px;
            width: 102px;
            border: 9px solid #fff;

        }

        .qrcode img {
            height: 102px;
            width: 102px;
        }

//此style，在chrome上显示正常，别的浏览器正常设置定位即可，不明白到底什么原因

var poster = document.getElementById('poster');
        html2canvas(poster, {
            useCORS: true,
            logging: true,
            // canvas: canvas
        }).then(function (canvas) {
            document.body.appendChild(canvas);
            var url = canvas.toDataURL('image/png').split(',')[1];
              //url是base64
        })