收藏
回答

关于wxss样式不起作用的问题

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug cover-view 微信iOS客户端 iOS Wechat 6.6.5 1.9.97

- 当前 Bug 的表现(可附上截图)

这是在iOS上的表现


主要问题:

1、`ransform:rotate` 不起作用;

2、设置了高度100%后,在开发者工具正常,但是在客户端下边没有100%,差了大约1px的高度

- 预期表现

这是在微信开发者工具上的表现


-代码片段


##WXML

<camera device-position="back" flash="off" binderror="error">

<cover-view class="cover-container">

<cover-view class="cover-frame-top">

<cover-view class="cover-cancel" bindtap="cancelAction">取消</cover-view>

</cover-view>

<cover-view class="cover-frame-left"></cover-view>

<cover-view class="cover-frame-right">

</cover-view>

<cover-view class="cover-frame-bottom">

<cover-view class="cover-catch" bindtap="catchAction">拍照</cover-view>

</cover-view>

<cover-view class="cover-catcher"></cover-view>

<cover-view class="cover-help">请将证件对准方框,调整光线避免反光</cover-view>

</cover-view>

</camera>


##WXSS


.cover-cancel {

position: absolute;

bottom: 10%;

left: 50%;

margin-left: -25px;

width: 50px;

height: 50px;

line-height: 50px;

border-radius: 25px;

border: 2px solid #ffffff;

color: #ffffff;

text-align: center;

transform:rotate(90deg);

-ms-transform:rotate(90deg);  /* IE 9 */

-moz-transform:rotate(90deg);   /* Firefox */

-webkit-transform:rotate(90deg); /* Safari 和 Chrome */

-o-transform:rotate(90deg);   /* Opera */

}


.cover-catch {

position: absolute;

top: 10%;

left: 50%;

margin-left: -25px;

width: 50px;

height: 50px;

line-height: 50px;

border-radius: 25px;

border: 2px solid #ffffff;

color: #ffffff;

text-align: center;

transform:rotate(90deg);

-ms-transform:rotate(90deg);  /* IE 9 */

-moz-transform:rotate(90deg);   /* Firefox */

-webkit-transform:rotate(90deg); /* Safari 和 Chrome */

-o-transform:rotate(90deg);   /* Opera */

}


.cover-help {

display: block;

position: absolute;

top: 49%;

right:-42%;

width: 100%;

color: #ffffff;

text-align: center;

font-size: 17px;

transform:rotate(90deg);

-ms-transform:rotate(90deg);  /* IE 9 */

-moz-transform:rotate(90deg);   /* Firefox */

-webkit-transform:rotate(90deg); /* Safari 和 Chrome */

-o-transform:rotate(90deg);   /* Opera */

}


回答关注问题邀请回答
收藏

5 个回答

  • HJX
    HJX
    2018-07-31

    我也遇到了 ,解决了吗

    2018-07-31
    赞同
    回复
  • Emile
    Emile
    2018-04-03

    但是目前已经是开启了样式补全的了

    2018-04-03
    赞同
    回复
  • Emile
    Emile
    2018-04-03

    样式补全

    开启此选项,开发工具会自动检测并补全缺失样式,保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。


    2018-04-03
    赞同
    回复
  • Emile
    Emile
    2018-04-03

    运行环境差异

    微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。

    三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

    • 在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10

    • 在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 53/57 内核来渲染的

    • 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的

    尽管三端的环境是十分相似的,但是还是有些许区别:

    • ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。详情

    • wxss 渲染表现不一致 尽管可以通过开启样式补全来规避大部分的问题 详情,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。


    2018-04-03
    赞同
    回复
  • Emile
    Emile
    2018-04-03

    不只是iOS,安卓也会


    2018-04-03
    赞同
    回复
登录 后发表内容