uni-app CSS 样式布局错乱 All In One

uni-app 样式布局错乱 All In One

uni-app CSS 样式布局错乱 All In One

uni-app 写的 H5 页面在内置的 webview 模式下调试正常, 但是在 ios 模拟器上调试样式错乱, 不一致

运行到内置浏览器

webview 可以调试 css ✅

运行到手机或模拟器

不可以调试 css, 只支持 nvue 原生调试 ❌

docs ✅

​

???? 首先应自己在真机运行或微信开发工具上调整样式，切勿在H5版开发后直接打包！

原因找到了, uni-app 里面不能用 CSS 伪类 ???

原因找到了，不能使用字体图标组件 ??? icon-fonts / emoji ???

vue 里只有行内样式有效，标签里的样式和引入的样式都失效 ???

solution

scss scoped ❌ bug

父组件的 css 样式没有加 scoped， 导致子组件继承了与父组件同名的 class 样式 bug;

<style lang="scss">
.content {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 50px;
    background-color: #f0f0f2;
    /* height: 100vh;
    height: 768px; */
}
</style>
      

<style scoped lang="scss">
.data-block-card-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    margin: 10px;
    padding: 20px;
    background: #fff;
    border-radius: 2px;
    .title {
        /* font-size: 14rpx; */
        font-size: 14px;
        /* font-size: 1rem; */
        margin-bottom: 8px;
    }
    .time {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
        .item {
            display: inline-block;
        }
        .separate {
            margin: 0 5px;
        }
    }
    .content {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
        // height: 66px;
        background: #fff;
        .left {
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: space-between;
            width: 100px;
            .date {
                margin-bottom: 12px;
            }
            .all {
                font-size: 24px;
                line-height: 32px;
            }
        }
        .right {
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: center;
            width: 70px;
            height: 100%;
            // height: 66px;
            border-left: 1px dashed #999;
            padding-left: 10px;
            .item {
                box-sizing: border-box;
                display: flex;
                flex-flow: row nowrap;
                align-items: flex-start;
                justify-content: center;
                margin-top: 5px;
                margin-bottom: 12px;
                .key {
                    display: inline-block;
                    margin-right: 10px;
                }
                .text {
                    display: inline-block;
                }
            }
        }
    }
    .ratio {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: center;
        margin-top: 12px;
        .item {
            margin-right: 10px;
            .value {
                position: relative;
                /* text-indent: 10px; */
                padding-left: 20px;
                // ::before {
                //     position: absolute;
                //     top: -3px;
                //     left: 0px;
                //     display: inline-block;
                //     /* width: 10px;
                //     height: 10px; */
                //     // content: "✅";
                //     content: "⬆";
                //     /* content: "⬇"; */
                // }
            }
        }
    }
}
</style>


      

X5 内核

腾讯 TBS x5 内核仅支持 Android 平台；iOS 只能使用自带的 WKWebview

​h