题：有时候，在模拟器上UI效果显示正常，但是在android上显示的UI布局就乱了。这其中一种可能是因为父组件设置了属性box-sizing:border-box;子组件加起来的宽度超过了父组件的宽度，从而导致显示的效果是：父组件还是正常显示在原来设定的位置上，而子组件则往下移动了，导致UI变乱。按照常理，当子组件的宽度大于父组件的宽度，会把父容器这个盒子给撑大，但是在微信小程序中，父容器还是原来设定的那么大，显示在原来位置，子组件则是往下移动，导致UI显示不正常。今天济南小程序小编就给大家说说解决方法。

解决方法：父组件要一起使用属性box-sizing:border-box;和overflow:hidden;注意子组件和父组件的宽度问题

.wxml代码如下：

1. <view class="head">
2. <button type="text" class="headBtn" >加密</button>
3. <button class="headBtn" >解密</button>
4. </view>
5. <view class="passAndEncrypt">
6. <input class="encryptedPass" />
7. <button class="encryptedTextBtn" >粘贴密文</button>
8. </view>
9. <textarea />

.wxss代码如下：

1. .head,.passAndEncrypt,textarea{
2. box-sizing: border-box;
3. display: block;
4. padding:0px;
5. margin-left:auto;
6. margin-right:auto;
7. width:89.375%;
8. min-width: 310px;
9. }
10. .head{
11. padding-top:20px;
12. }
13. .passAndEncrypt{
14. height:42px;
15. }
16. .headBtn{
17. display: inline-block;
18. width:50%;
19. text-align:center;
20. margin:0px;
21. padding:0px;
22. background-color:white;
23. border-radius: 0px;
24. border-color: white;
25. color: gray;
26. font-size:14px;
27. }
28.  
29.  
30. .encryptedPass{
31. float: left;
32. border:1px solid rgb(220,220,220);