javascript - 移动端页面不兼容

问题描述

问 题

目标是做一个：左侧第一列固定，右侧可以移动的table。

在chrome模拟器下正常，如下:

左侧固定，右侧可以移动。

但是在手机端左侧relative的部分不显示：如下

具体用到的就两个css

/*左侧固定列class*/
.fixCol {
    position: absolute;
    min-width: 101px;
    left: 9px;
    border-top:1px solid #ddd;
}

/*table容器样式*/
.fixTableContainer {
    overflow-x: auto;
    margin-left: 99px;
}

求大神指导下，如何做个移动端的兼容。

---

尝试做了z-index，左侧同样不展示。

不是正解的解决：

/*左侧固定列class*/
.fixCol {
    position: absolute;
    min-width: 110px;
    top: auto;
    left: 9px;
    border-top:1px solid #ddd;
    /* add */
    display: inline-grid !important;
}

/*table容器样式*/
.fixTableContainer {
    overflow-x: auto;
    margin-left: 109px;
    /* add */
    float: left;
}

解决方案

现在移动端都推荐使用最新的css3等新技术，不用考虑兼容性（前端福利）

• 使用flex，布局十分方便

• 也不知道具体的布局，你看是不是包含块没设置对(父级加个relative定位等), 或者给.fixCol加个top(经常top,left要同时写，不然有时会有问题)或者背景色（看它定位到哪去了)

这篇关于javascript - 移动端页面不兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！