ios兼容性问题。

Question

看这里，看这里，看这里

这个地方在ios上样式变了 如下
**1：加号的高度变了
2：input只能点左上角。
3：苹果手机上浏览器后台关闭，打开后样式也会变。**

高度我是通过JS控制的，代码如下

PS:页面上现在还是PX换了rem也没用,

做过如下测试，
**1：改变px为rem
2：把a改为diaplayblock 固定高度
3：固定input的高度。**
这三种方式input点击还是有问题，
目前发现跟最后的两个监听有点关系。 去除 resize跟orientationchange input可以点击。 
但是下拉跟浏览器后台后样式会改变
求大神解决！！！

Answer 1

我打开你的链接是这样的不明觉厉。我按照我的想法写一个，你看一下对你有没有帮助&nbsp;<style type="text/css">&nbsp; &nbsp; &nbsp; &nbsp; *{margin: 0;padding: 0}&nbsp; &nbsp; &nbsp; &nbsp; .file_box{width: 100px; height: 100px; border: 1px dashed #1f9de0; position: relative; margin: 30px;}&nbsp; &nbsp; &nbsp; &nbsp; .file_box::before, .file_box::after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #1f9de0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-50%);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .file_box::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateX(-50%);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; input[type='file']{width: 100%; height: 100% ; opacity: 0; position: absolute; z-index: 1; cursor: crosshair;}&nbsp; &nbsp; &nbsp; &nbsp; .close{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(50%,-50%) ;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #999;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .close::before, .close::after {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%,-50%) rotate(45deg);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .close::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%,-50%)&nbsp; rotate(45deg);;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp;<div class="file_box">&nbsp; &nbsp; &nbsp;<i class="close"></i>&nbsp; &nbsp; &nbsp;<input type="file">&nbsp;</div>