5

我遇到了一个让我有点困惑的问题。

我对这个问题的参考是 Mac 上的 Chrome 32 和 iOS 7.0.4 上的 Safari。

在下面的示例中，Chrome 将.background和textarea元素中的文本完美地呈现在彼此之上，这就是我想要的。不过，iOS 上的 Safaritextarea以 3 个像素为单位来偏移文本。尽管填充、边框和边距在两个元素上设置为相同的值，但仍会发生这种情况。

当我通过我的 iPhone 设备和 iOS 模拟器在 Safari 的开发人员工具中进行调试时，元素本身在概述元素指标时完美对齐。

iOS 上的指标大纲

标记

<div class="container">
    <div class="background">This is a test</div>
    <textarea>This is a test</textarea>
</div>

CSS

.container {
    border: 1px solid #cdcdcd;
    background: #f0f0f0;
    width: 400px;
    height: 50px;
    position: relative;
    margin: 24px 0;
}

.background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #f00;
}

textarea {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    position: relative;
    z-index: 2;
}

演示：http: //jsfiddle.net/Y8S5E/2/

任何人都可以为这个问题提供解决方案或一些理论来研究吗？

编辑

这似乎是textarea's shadow DOM 节点的问题。有人对如何定义此元素的填充有一些参考吗？百分比值还是硬 3px 值？有什么办法可以去掉这个填充？

Shadow DOM 节点在 textarea 中强制填充

4

1 回答 1

5

不幸的是，我认为你不能在 iOS 的 Shadow DOM 中设置样式。一些元素公开了您可以挂钩的伪属性。例如，<input type="range">公开一个-webkit-slider-runnable-track伪元素。

http://codepen.io/robdodson/pen/FwlGz

您可以在开发工具中看到这一点。

在此处输入图像描述

但我不认为textarea暴露这样的事情。

于 2014-02-22T01:35:09.030 回答