watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=uni-app 样式布局错乱 All In One



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

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

运行到内置浏览器

webview 可以调试 css ✅

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

运行到手机或模拟器

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

docs ✅

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

???? 首先应自己在真机运行或微信开发工具上调整样式,切勿在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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=​h