微信开发工具dom可以显示，但是真机上却不显示

开发工具:

真机：

代码html:

 <view class='bottom'>

            <view class="input_box">

                <input placeholder="评论一下吧" />

                <view class="btn_send">发送</view>

            </view>

            <view class="zan_box">

                <image class='icon_zan' src='../img/icon_zan_on.png'></image>

                <view class='label_zan'>88</view>

            </view>

        </view>

代码css :

.bottom {

  color: #c0c0c0;

  padding-left: 15px;

  font-size: 14px;

  position: fixed;

  bottom: 0;

  width: calc(100% - 30px);

  height: 60px;  

  z-index: 10;

}

.bottom .input_box {

float:left;

height:40px;

line-height:40px;

width:calc(100% - 70px);

background-color:#ebebeb;

border-radius:20px;

padding-left:15px;

margin-bottom:10px;

color:#808080;

font-size:16px;

margin-top: 10px;

}

.bottom  input {

width:calc(100% - 60px);

margin-top:8px;

float:left;

}

.bottom .btn_send {

  color:white;

width:44px;

height:28px;

margin-top:6px;

background-color:#f36e52;

text-align:center;

line-height:28px;

border-radius:13px;

float:right;

margin-right:10px;

font-size:14px;

}

.bottom .zan_box {

  width: 40px;

  float: right;

  text-align: center;

  margin-top: 10px;

}

.bottom .icon_zan {

  width: 25px;

  height: 25px;

  vertical-align: bottom;

}

.bottom .label_zan {

  font-size: 12px;

}

新手小白，麻烦大神解答一下