我遇到了一个让我有点困惑的问题。
我对这个问题的参考是 Mac 上的 Chrome 32 和 iOS 7.0.4 上的 Safari。
在下面的示例中,Chrome 将.background
和textarea
元素中的文本完美地呈现在彼此之上,这就是我想要的。不过,iOS 上的 Safaritextarea
以 3 个像素为单位来偏移文本。尽管填充、边框和边距在两个元素上设置为相同的值,但仍会发生这种情况。
当我通过我的 iPhone 设备和 iOS 模拟器在 Safari 的开发人员工具中进行调试时,元素本身在概述元素指标时完美对齐。
标记
<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 值?有什么办法可以去掉这个填充?