我遇到了一个让我有点困惑的问题。
我对此问题的参考是 Mac 上的 Chrome 32 和 iOS 7.0.4 上的 Safari。
在以下示例中,Chrome 将文本呈现在.background
and textarea
元素完美且相互叠加,这就是我想要的。不过,iOS 上的 Safari 会偏移文本中的文本textarea
具有 3 个像素单元。尽管两个元素上的内边距、边框和边距设置为相同的值,但仍会发生这种情况。
当我通过 iPhone 设备和 iOS 模拟器在 Safari 的开发人员工具中进行调试时,在概述元素指标时,元素本身完美对齐。
Markup
<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;
}
Demo: http://jsfiddle.net/Y8S5E/2/ http://jsfiddle.net/Y8S5E/2/
任何人都可以针对这个问题提供解决方案或一些理论来研究吗?
Edit
看来这是一个问题textarea
的影子 DOM 节点。有谁知道如何定义该元素的填充吗?百分比值还是硬 3px 值?有什么办法去掉这个填充吗?
不幸的是,我认为你不能在 iOS 中的 Shadow DOM 内部设置样式。有些元素公开了您可以附加的伪属性。例如,<input type="range">
暴露了一个-webkit-slider-runnable-track
伪元素。
http://codepen.io/robdodson/pen/FwlGz http://codepen.io/robdodson/pen/FwlGz
您可以在开发工具中看到这一点。
但我不认为textarea
暴露了这样的事情。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)