Question

我在IE11上遇到了一个基于flexbox的表的问题。这是在其他浏览器中的样子：

这是在IE11上的外观：

查看代码：

<div class="submasthead__items">
    <table class="submasthead-item__table">
        <thead>
        <tr>
            <th>Qualifying deposits of:</th>
            <th>Eligible for a bonus of:</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                $20,000 - $49,999
            </td>
            <td class="text--brightRed">
                $200
            </td>
        </tr>
        <tr>
            <td>
                $50,000 - $99,999
            </td>
            <td class="text--brightRed">
                $300
            </td>
        </tr>
        <tr>
            <td>
                $100,000+
            </td>
            <td class="text--brightRed">
                $500
            </td>
        </tr>
        </tbody>
    </table>
</div>

这些是我使用flexbox的SCSS部分：

&__items {
    .submasthead--SM1 & {
        margin: 2em 0;
        @include respond-to($medium) {
            margin: 1.3em 0;
            display: flex;
            justify-content: space-around;
        }
    }
}

&__subcopy {
    max-width: 925px;
    margin: 0 auto;
    .submasthead--SM1 & {
        @include respond-to($medium) {
            max-width: none;
            margin: 0;
            display: flex;
            justify-content: center;
        }
    }
    p {
        font-size: $copy-small;
        width: 95%;
        @include respond-to($medium) {
            width: 45%;
        }
    }
}


&-item {
    &__table {
        border-collapse: collapse;
        width: 98%;
        @include respond-to($medium) {
            width: 400px;
            max-width: 100%;
            min-width: 300px;
        }
        td {
            .submasthead--SM1 & {
                flex: 1;
                text-align: left;

                @include respond-to($medium) {
                    text-align: center;
                }
            }
        }
        th {
            padding: 0.4em 0.5em;
            font-size: $copy-small;
            line-height: 1.25;
            .submasthead--SM1 & {
                text-align: left;
                flex: 1;

                @include respond-to($medium) {
                    text-align: center;
                    font-size: $copy-regular;
                }
            }
        }
        tr {
            border: 1px $color-coolGrayLight solid;

            .submasthead--SM1 & {
                display: flex;
                td + td {
                    text-align: center;
                    font-weight: bold;
                }

                *:nth-child(1) {
                    flex-basis: 20%;

                    @include respond-to($medium) {
                        flex-basis: 0;
                    }
                }

                @include respond-to($medium) {
                    align-items: center;
                }
            }
        }
        tbody {
            tr:nth-child(odd) {
                background-color: $color-coolGrayLight;
            }
        }
    }
}

如果您想看一下，我创建了一个Codepen：https://codepen.io/anon/pen/pZvXoJ

如果其他人不起作用，请参见此密码笔：https://codepen.io/maketroli/pen/pZvXoJ

关于我的代码可能有什么问题的任何想法？

Answer 1

我想用于IE11 flex box bug的资源如下： https://github.com/philipwalton/flexbugs

”“此存储库是社区管理的flexbox问题列表以及针对这些问题的跨浏览器解决方法。目标是，如果您正在使用flexbox构建网站，并且某些功能无法按预期工作，则可以在这里找到解决方案”

在IE11上的表格中存在Flexbox问题

1 个答案: