IE 11中的文件输入使得兄弟DIV在单击或右键单击时消失

Question

我有以下HTML和CSS。

HTML

<div class="parent">
  <div class="child">Sample Text</div>
  <input type="file"></input>
</div>

CSS

.child {
  background-color: #231f20;
  color: #FFFFFF;
  display: block;
  height: 100%;
  width: 100%;     
}
.parent {
  display: block;
  height: 32px;
  margin-top: 10px;
  width: 100%;
  -moz-border-radius: 0 0 0 0;
  background: none;
  border: none;
  line-height: 32px;
  position: relative;
  overflow: hidden;
  direction: ltr;
  cursor: pointer;
  text-align: center;
  color: #333;
  font-weight: bold;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;  
}
.parent input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: 300px solid transparent;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  filter: alpha(opacity=0);
  -o-transform: translate(-300px, -300px) scale(10);
  -moz-transform: translate(-800px, 0) scale(10);
  cursor: pointer;
  height: 100%;
}    

这方面的小提琴可以在这里找到：http://jsfiddle.net/20vj44L9/

我注意到当我点击文件输入按钮时，内部div消失了。这似乎只发生在Internet Explorer（IE）11上。它适用于Chrome / FireFox，甚至可以在IE 10上运行。我尝试在IE 11上使用F12开发人员工具进行调试，但我无法弄清楚问题可能是什么。有没有人有任何可能有帮助的想法？谢谢。

Answer 1

我能够用你的小提琴重现这个问题，然后我开始进一步减少它。这里的问题是输入控件本身的顶部和底部边框。在将焦点赋予元素时，这些会立即导致失效错误，从而沿着y轴向上推动兄弟DIV。您可以使用F12 Developer工具中的元素突出显示器来确认这一点。

在下面的图像中，我将输入的边框大小减小到100px，这导致在输入被聚焦后，相邻的DIV被放置在输入上方100个像素。您不能再看到该元素，因为父级具有固定的高度，并且溢出设置为隐藏。

删除顶部和底部边框可解决此问题。

.parent input {
  position: absolute;
  top: 0; right: 0; opacity: 0;
  border-left: 300px solid transparent;
  border-right: 300px solid transparent;
}

我将在内部提交一个问题，让我们的布局团队给予一些考虑。我将把这个小提琴附在票上：http://jsfiddle.net/jonathansampson/d74br18p/。