收藏
回答

border-radius字体偏右

问题模块 框架类型 问题类型 操作系统 工具版本
开发者工具 小程序 Bug Windows 1.02.1807200

第一张图是模拟器里面的,字体居中,

第二张图是手机测试里面的,字体偏右(手机是IPHONE8,微信版本是6.7.0)


下面是代码,

html

<view class="round floatL" style="background-color:{{type?'#27D1A1':'#03AEFC'}}">
   {{type?'':''}}
</view>

css

ul li .detail .round{color:white;height:80rpx;width:80rpx;border-radius:40rpx;text-align: center;line-height: 80rpx;}


最后一次编辑于  2018-07-23
回答关注问题邀请回答
收藏

3 个回答

  • 撕咬
    撕咬
    2018-07-23

    找到问题原因了,贼鸡儿恐怖,因为换行了,手机里面编译的时候相当于多了个空格,我把view里面的换行去掉就OK了,,,,,,真是无语!

    2018-07-23
    赞同
    回复 6
    • 撕咬
      撕咬
      2018-07-23

      就是因为用了Webstorm的格式化代码,才多出来了这个换行,头皮发麻

      2018-07-23
      回复
    • 喔喔哦
      喔喔哦
      2018-07-23

      如果用text来分割文本不能格式化.一格式化就会出现text另起一行的情况

      2018-07-23
      回复
    查看更多(1)
  • HellyW
    HellyW
    2018-07-23

    你去掉border-radius也会偏右么

    2018-07-23
    赞同
    回复 1
    • 撕咬
      撕咬
      2018-07-23

      试了,手机一样偏右

      2018-07-23
      回复
  • 卢霄霄
    卢霄霄
    2018-07-23

    你不要border-radius的时候,真机上是居中的吗

    2018-07-23
    赞同
    回复 9
    • 撕咬
      撕咬
      2018-07-23

      一样偏右

      2018-07-23
      回复
    • 卢霄霄
      卢霄霄
      2018-07-23回复撕咬

      页面能做成代码片段吗

      2018-07-23
      回复
    • 撕咬
      撕咬
      2018-07-23回复卢霄霄

      已经解决了,就是手机里面的微信对代码编译过程和模拟器的不一样吧,我view里面多了一个换行,再手机里面就相当于加了一个空格,所以老是不能居中,我也是服了,第一次做小程序,没想到坑这么多,,,,

      2018-07-23
      回复
    • 卢霄霄
      卢霄霄
      2018-07-23回复撕咬

      这么奇怪?wxml里换行,会引起多个空格?

      2018-07-23
      回复
    • 撕咬
      撕咬
      2018-07-23回复卢霄霄

      估计是因为我用webstorm编写的时候,喜欢格式化代码(不对齐难受呀),然后出错了

      2018-07-23
      回复
    查看更多(4)