主页 / 问题 / 610450
Accepted
jashka
Asked:2020-01-03 21:24:09 +0000 UTC2020-01-03 21:24:09 +0000 UTC

为什么 input type="file" 在不同版本的 Microsoft Edge 中显示不同？

  • 772

Edge Microsoft Edge 38.14393.0.0 Microsoft EdgeHTML 14.14393 我检查 https://saucelabs.com并看到正常结果 (Microsoft Edge 25.10586.0.0 Microsoft EdgeHTML 13.10586)微软边缘 38.14393.0.0 微软边缘 HTML 14.14393

在此处输入图像描述

问题是什么以及如何解决？

.hide-input {
    position: absolute;
    overflow: hidden;
    opacity: 0;
    z-index: -1;
}
 
.fileInput {
    background: #789fc3;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    width: 188px;
    border: none;
    padding: 11px 35px 9px;
    text-transform: uppercase;
    box-shadow: 0 1px 0 1px #f5f5f5;
    -webkit-box-shadow: 0 1px 0 1px #f5f5f5;
    margin: 0 auto;
    display: block;
    text-align: center;
    position: relative;
}
<input type="file" id="upload_photo" class="hide-input"/> 
<label for="upload_photo" class="fileInput">Загрузить фото</label>

html

1 个回答

  1. Best Answer

    事实上，在旧版浏览器中z-index，负数是行不通的。
    您需要向.hide-input元素添加以下样式之一：

    1. display: none（但在旧版浏览器中点击可能不适用于此样式）
    2. visibility:hidden
    • 1

相关问题