边框渲染异常

如图所示,第一次进入这个页面,textarea的左边框跑到上面的label那里去了。
clipboard.png
如果选择定时发布弹出时间输入框,也就是UI重绘一下,就正常了
clipboard.png

这个问题反复出现,搞不清楚是什么原因导致的,textarea的宽度也并没有超出,而且也用了box-sizing:border-box;

.form-group{
    position: relative;
    width: 34.2rem;
    margin: 0 auto;
}
.form-group>textarea{
    display:block;
    width: 100%;
    height: 5.35rem;
    border: 1px solid #ccc;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: .8rem;
    resize:none;
    outline: none;
}

阅读 1.8k
1 个回答
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    textarea{
        display:block;
        width: 100%;
        height: 5.35rem;
        border: 1px solid #ccc;
        margin: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: .8rem;
        resize:none;
        outline: none;
    }
</style>
<body>
    <textarea name="">
        

    </textarea>
    
</body>
</html>

一切正常的,换个环境测试呢?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题