iOS中的textarea上的Shadow DOM强制填充
我遇到一个使我困惑的问题。
我对这个问题的参考是Mac上的Chrome 32和iOS 7.0.4上的Safari。
在以下示例中,Chrome将.background
和textarea
元素中的文本呈现完美并相互.background
,这就是我想要的。 iOS上的Safari,用3个像素单位来抵消textarea
中的textarea
。 虽然填充,边框和边距在这两个元素上都设置为相同的值,但发生这种情况。
当我在Safari的开发者工具中进行debugging时,无论是通过我的iPhone设备还是iOS模拟器,在概述元素指标时,元素本身都是完美alignment的。
标记
<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/
任何人都可以提供一个解决scheme或一些理论来研究,为这个问题?
编辑
看来,这是textarea
的阴影DOM节点的问题。 有没有人有一些参考如何定义这个元素的填充? 百分比值或硬3px值? 任何方式来删除这个填充?
不幸的是,我不认为你不能在iOS中的阴影DOM的风格。 一些元素暴露你可以挂钩的伪属性。 例如, <input type="range">
公开了一个-webkit-slider-runnable-track
伪元素。
http://codepen.io/robdodson/pen/FwlGz
你可以在开发工具中看到这个。
但我不认为textarea
暴露这样的事情。