FireFox下上传控件的显示问题

Chrome正常

FireFox显示不正常

 

上传控件一直有个问题，就是样式问题，解决方法就是用一个大的背景层挡住，然后点大的背景层去触发上传控件的Click事件.

Html:

<span id="uploadImg3">

  <div class="uploadImg-bg3"></div> //大的背景层遮挡

    <h3 class="btncard3">请上头像图片</h3>
       <h4 class="btncard-tips3">（尺寸150*150，大小120K以内）</h4>
    <input type="file" id="fileccc3" size="1">
</span>

Css:

#uploadImg {
   width:485px;
    height:240px;
    border-radius: 5px;
    background: #fff;
    display: block;
    margin:0 auto;
    position: relative;
    z-index: 9;
    margin-top:20px;


}
#fileccc{  width:485px;
    height:240px;position: absolute;left:0;top:0;background: #fff;
    z-index: -1;}

.uploadImg-bg{width:485px;
    height:240px;position: absolute;left:0;top:0;
    z-index: 10;background:#fff url("../image/index01/website.png") no-repeat;
    background-position: center 40%;}
.btncard{color:#f28244;border:none;background: transparent;position: absolute;z-index: 12;font-size: 20px;width:120px;height:22px;
left:50%;margin-left:-60px;top:50%;}
.btncard-tips{color:#585858;border:none;background: transparent;position: absolute;z-index: 12;font-size: 14px;width:212px;height:15px;
    left:50%;margin-left:-107px;top:65%;}

js:

$(".uploadImg-bg").click(function(){
    $("#fileccc").trigger('click');
});

引展:trigger和triggerHandler的区别

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

与 trigger() 方法相比的不同之处 
它不会引起事件（比如表单提交）的默认行为 
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。 
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。 
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

 

简言之：triggerHandler是触发事件上绑定的方法。而trigger除了触发事件上绑定的方法外，还触发浏览器产生的默认事件。

或者这篇文章:

http://www.jb51.net/article/49164.htm