PC端项目踩过的坑

1. <input class="localfile1" type="file" accept=".xls,.doc,.txt,.pdf">   在不同浏览器上的显示效果 

解决办法：可以自己写一个按钮，定位到这个按钮上，模拟上传按钮。

.block{
   position:relative;
}
.localfile {
    background: #085ab0;
    border: none;
    color: #fff;
    padding: 8px 10px;
    border-radius: 5px;
}
.localfile1 {
    position: absolute;
    height: 40px;
    left: 14%;
    opacity: 0;
}

<div class="block">
	<span>选择文件：</span>
	<button class="localfile">从本地导入</button>
	<input class="localfile1" type="file" accept=".xls,.doc,.txt,.pdf">
</div>

2. select  下拉框在不同浏览器显示不同的样式

解决办法：自己写一个模拟下拉

<style>
.hetong {
    float: left;
    width: 80%;
    position: relative;
}
.hetong li {
    margin-top: 20px;
    margin-bottom: 3px;
}
.hetong li .tractchoose {
    height: 35px;
    width: 70%;
    border: 1px solid #d0d0d0;
    line-height: 35px;
    padding-left: 20px;
    float: left;
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px;
}
.favorite-wrap .box .hetong li .tractchoose .choosetxt {
    display: inline-block;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hetong li .tractchoose .iconxiala {
    font-size: 20px;
    float: right;
}
.hetong li .tracttype {
    width: 70%;
    margin-left: 26%;
    float: left;
    background: #fff;
    padding: 10px 0 0 10px;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 999;
    display: none;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
.favorite-wrap .box .hetong li .tracttype li {
    width: 100%;
    line-height: 30px;
    float: left;
    margin: 0;
    font-size: 14px;
    color: #666666;
}
.hetong li .tracttype li span {
    font-size: 20px;
}
.hetong li .tracttype li ul {
    width: 90%;
    margin-left: 10%;
    float: left;
}
.favorite-wrap .box .hetong li .tracttype li ul li {
    width: 100%;
    float: left;
}
.hetong li .tracttype li {
    width: 100%;
    line-height: 30px;
    float: left;
    margin: 0;
    font-size: 14px;
    color: #666666;
}
</style>

<ul class="hetong">
			<li>
				<label>合同类型：</label>
				<p class="tractchoose"><span class="choosetxt">供用热合同</span><i class="iconfont iconxiala"></i></p>
				<ul class="tracttype" >
					<li><span>▾</span>一般适用合同
					    <ul class="conchoose">
							<li>适用能源合同</li>
							<li>技术合同</li>
						</ul>
					</li>
					<li><span>▸</span>适用能源合同
						<ul style="display: none" class="conchoose">
							<li>适用能源合同</li>
							<li>技术合同</li>
						</ul>
					</li>
					<li><span>▸</span>技术合同
						<ul style="display: none" class="conchoose">
							<li>适用能源合同</li>
							<li>技术合同</li>
							<li>适用能源合同</li>
							<li>技术合同</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<label>合同范本：</label>
				<p class="modelchoose"><span class="modeltxt">小型设备采购合同</span><i class="iconfont iconxiala"></i></p>
				<ul class="tractmodel" >
					<li>设备采购合同</li>
					<li>小型设备采购合同小型设备采购合同小型设备采购合同</li>
				</ul>

			</li>
		</ul>
<script>
$(".tractchoose").click(function () {
        var x = $(this).find("i").hasClass("icontop");
        if(x){
            $(".tracttype").css("display","none");
            $(this).find("i").removeClass("icontop");
		}else{
            $(".tracttype").css("display","block");
            $(this).find("i").addClass("icontop");
        }
    })
    $(".tracttype li").click(function () {
        var x = $(this).find("span").text();
        var y = decodeURIComponent(x);
        if(y=='▸'){
            $(this).find("ul").show();
            $(this).find("span").text("▾");
		}else{
            $(this).find("ul").hide();
            $(this).find("span").text("▸");
		}
    })
    $(".conchoose li").click(function () {
        var choosetext = $(this).text();
        $(".choosetxt").text(choosetext);
        $(".tracttype").hide();
    })
    // <!--范本-->
    $(".modelchoose").click(function () {
        var x = $(this).find("i").hasClass("icontop");
        if(x){
            $(".tractmodel").css("display","none");
            $(this).find("i").removeClass("icontop");
        }else{
            $(".tractmodel").css("display","block");
            $(this).find("i").addClass("icontop");
        }
    })
    $(".tractmodel li").click(function () {
        var choosetext = $(this).text();
        $(".modeltxt").text(choosetext);
        $(".tractmodel").hide();
    })
</script>

3. 文本添加波浪线

（1）这个的兼容性是IE9以上（不包括IE9）和主流浏览器

<style>
    .flow-wave {
        background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x, radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
        background-size: 20px 20px;
        background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
        display: inline-block;
        line-height: 30px;
    }
</style>

<body>
    <div class="flow-wave">文字波浪线</div>
</body>

（2）这个兼容ie和主流浏览器

<style>
    .flow-wave {
        background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x, radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
        background-size: 20px 20px;
        background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
        display: inline-block;
        line-height: 30px;
    }
    
    .svg-wave {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23333' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
        background-size: 20px auto;
        display: inline-block;
        line-height: 30px;
    }
</style>

<body>
    <div class="flow-wave">文字波浪线</div>
    <div class="svg-wave">svg文字波浪线</div>
</body>

4. iconfont图标在360兼容模式和IE上显示不出来，如果保证了引入文件的正确和iconfont字体名字的正确    可以采用将iconfont.css里面的引入路径改成从根路径开始  ，这是因为IE浏览器内核和其他浏览器内核对文件路径读取方式的不同造成的。

5. 弹性盒子对IE的兼容性很差  尽量不用。

6. 元素居中，可以将元素转换成行内元素 ，然后对其父元素设置text-align：center。

7.