移动端渲染应该用transform属性
HTML
<div class="WxBookContent">
<div class="FormItemEdit">
<input type="text" class="TextBox" placeholder="请输入书名">
<a href="javascript:void(0)" class="BtnClear"></a>
</div>
css
.WxBookContent{
padding-top: 16px;
}
.WxBookContent .FormItemEdit {
background: #ffffff;
padding: 0px 16px;
margin-bottom: 10px;
position: relative;
/* border-bottom:1px solid #d9d9d9;
border-top:1px solid #d9d9d9; */
}
.WxBookContent .FormItemEdit:before {
content: " ";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
border-top: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}
.WxBookContent .FormItemEdit:after {
content: " ";
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #d9d9d9;
color: #d9d9d9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
z-index: 5;
}