div 上覆盖的文本区域 - iOS 上的对齐问题 8

Question

在 iOS 8 上，我用文本区域覆盖 div，使用相同的文本并重置每个 margin/padding 值，但我仍然有 3px 的偏移量无法摆脱。它在 Chrome 和 Safari 桌面上运行良好。

这里是 fiddle：http://jsfiddle.net/jfvz0ved/

textarea, div {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.1em;
    line-height: 1.6em;
    font-family: Courrier;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    display: block;
    text-align: left;
    resize: none;
    width: 100%;
    color: black;
    opacity: 0.4;
}

知道属性是什么导致了这个问题吗？如果可能的话，我不想求助于浏览器检测 + 特殊 class。

Answer 1

应用通用 CSS 重置后会发生什么？

如果这解决了问题，则可能需要重置其中一个包含元素。

Answer 2

经过相当多的研究，结果 iOS 正在添加一个 3px 的填充，并且它不能（显然）被删除。因此，最好的解决方法是对其进行补偿。当检测到 iOS 时，我在 div 上添加了一个 left: 3px。这并不理想（我很想避免这种情况并有一个 CSS 唯一的解决方案），但它确实有效。

div 上覆盖的文本区域 - iOS 上的对齐问题 8

Textarea overlaid on div - Alignment issues on iOS 8

html

css

ios8