Bootstrap 4 error in IE11

Question

Bootstrap 4 error in IE11

Asked 4 years, 11 months ago

Viewed 114 times

2

I created this site on Bootstrap 4. And it works on all browsers perfectly.

But when I open it in IE 11 it looks like this:

The code I’m using is this:

.big-table {
    margin: 10px 0;
    overflow-x: scroll;
    display: -ms-grid;
    display: grid;
}

@media screen and (max-width: 767px) {
    .big-table {
        overflow-x: scroll;
        display: -ms-grid;
        display: grid;
    }
}

.big-table table {
    background-color: #ffffff;
    width: 100%;
    table-layout: fixed;
}

@media screen and (max-width: 767px) {
    .big-table table {
        table-layout: unset;
    }
}

.tbl-header {
    background-color: #000000;
}

.tbl-header th {
    border-right: 1px solid #ffffff;
    background-color: #000000;
    padding: 10px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    word-break: break-all;
    width: 150px;
}

@media screen and (max-width: 767px) {
    .tbl-header th {
        white-space: nowrap;
    }
}

.tbl-content {
    margin-top: 0px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tbl-content .checkbox label {
    font-size: 10px;
}

@media screen and (max-width: 900px) {
    .tbl-content .checkbox label {
        font-size: 10px;
    }
}

.tbl-content td {
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    font-weight: 300;
    font-size: 9px;
    color: #000000;
    font-weight: 400;
    border-bottom: solid 1px #ccc;
    word-break: break-all;

}

.tbl-content td:first-child {
    text-align: left;
}

@media screen and (max-width: 900px) {
    .tbl-content td {
        font-size: 11px;
    }
}

@media screen and (max-width: 767px) {
    .tbl-content td {
        white-space: nowrap;
    }
}

.tbl-sub-header {
    background-color: #007de8;
}

.tbl-sub-header td {
    color: #ffffff;
    font-weight: 700;
}

.tbl-sub-header td .inputer {
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #cccccc;
    padding: 5px 5px 5px 10px;
    /* width: 100%; */
    width: 115px;
    /* font-size: 12px;
  font-size: 1.2rem; */
    font-size: 10px;
    font-weight: 400;
    color: #646464;
}

.tbl-sub-header td .inputer::-ms-expand {
    display: none;
}

.tbl-sub-header td .inputer[type='number']::-webkit-inner-spin-button,
.tbl-sub-header td .inputer[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tbl-sub-header td .inputer[type='number'] {
    -moz-appearance: textfield;
}

@media screen and (max-width: 825px) {
    .tbl-sub-header td {
        white-space: nowrap;
    }
}

.tbl-sub-header td .select-inputer {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff url(../images/select-arrow.svg) right 5px center no-repeat;
    background-size: 22px 22px;
    padding-right: 30px;
    cursor: pointer;
}

.tbl-sub-header td .select-inputer::-ms-expand {
    display: none;
}

.tbl-sub-header td .date-inputer {
    background: #ffffff url(../images/icon-calendar.svg) right 5px center no-repeat;
}

.tbl-tower {
    background-color: #646464;
}

.tbl-tower td {
    color: #ffffff;
    /* text-align: left; */
}

input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

input::-webkit-inner-spin-button,
input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    opacity: 0;
}

input::-webkit-calendar-picker-indicator:hover {
    background: transparent;
    cursor: pointer;
}

<div class="row">
                <div class="col-xs-12">
                    <div class="big-table">
                        <div class="tbl-header">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <thead>
                                    <tr>
                                        <th>Torre</th>
                                        <th>Catálogo</th>
                                        <th>Estado</th>
                                        <th>GT</th>
                                        <th>Data</th>
                                        <th>Hora</th>
                                        <th>Urgente</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        <div class="tbl-content">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tbody>

                                    <tr class="tbl-sub-header">
                                        <td class="input-group checkbox"><input type="checkbox" name="" id="checkbox-16" checked="checked" validate="">
                                            <label for="checkbox-16">Global</label></td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td><select class="inputer select-inputer" name="" id="" type="select">
                                                <option value="">João Mendes</option>
                                                <option value="Item 1">Item 1</option>
                                                <option value="Item 2">Item 2</option>
                                                <option value="Item 3">Item 3</option>
                                            </select></td>
                                        <td class="">
                                            <input class="inputer date-inputer" name="" id="date" type="date" value="2019-01-31" min="2019-01-01" max="2019-12-31">

                                        </td>
                                        <td><select class="inputer select-inputer" name="" id="" type="select">

                                                <option value="13:30">13:30</option>
                                                <option value="14:00">14:00</option>

                                            </select></td>
                                        <td><select class="inputer select-inputer" name="" id="" type="select">

                                                <option value="Sim">Sim</option>
                                                <option value="Não">Não</option>

                                            </select></td>
                                    </tr>

                                    <tr class="tbl-tower">
                                        <td class="input-group checkbox"><input type="checkbox" name="" id="checkbox-15" checked="checked" validate="">
                                            <label for="checkbox-15">GTE 3</label></td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td class="input-group checkbox"><input type="checkbox" name="" id="checkbox-10" checked="checked" validate="">
                                            <label for="checkbox-10">IXP.18.37595</label>
                                            <i class="icon-trd-teste2" data-toggle="tooltip" title="Redistribuída 2 vezes"></i>
                                        </td>
                                        <td>GlobalConnect Equipamentos</td>
                                        <td>Em Provisão</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td class="input-group checkbox"><input type="checkbox" name="" id="checkbox-11" checked="checked" validate="">
                                            <label for="checkbox-11">IXS.18.37595</label>
                                        </td>
                                        <td>GlobalPhone Unify Connect</td>
                                        <td>Em Provisão</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>

                                    <tr class="tbl-tower">
                                        <td class="input-group checkbox"><input type="checkbox" name="" id="checkbox-12" checked="checked" validate="">
                                            <label for="checkbox-12">GTE 4</label>
                                        </td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td class="input-group checkbox"><input type="checkbox" name="" id="checkbox-13" checked="checked" validate="">
                                            <label for="checkbox-13">IXS.18.37595</label>
                                        </td>
                                        <td>...</td>
                                        <td>Em Provisão</td>
                                        <td>...</td>
                                        <td>...</td>
                                        <td>...</td>
                                        <td>...</td>
                                    </tr>


                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

Someone would have a solution?

1

Taking a bad table formatting in my IE 11 became normal http://prntscr.com/og8nwi look at i the version I’m using, and my OS is Win 10, I don’t know if IE 11 in Win7 looks different...

– hugocsl

2019/07/17 at 11:19
Yeah, OS is Windows 7 version of IE is 11.0.95 (2013), but the taela code is spelled wrong?

– Rafael Cavalcante

2019/07/17 at 11:30
Here it got a bit badly formatted... I don’t know if it’s something with the font size or I don’t know... http://prntscr.com/og8xbp see that it was misplaced in Chrome... And in IE11 in Win 10 was like the other image I sent. tb has open tag there in the code, I think I had a div without closing after a check

– hugocsl

2019/07/17 at 11:35
1

Thank you so much for your help, I’ll check.

– Rafael Cavalcante

2019/07/17 at 11:49

No answers

Browser other questions tagged html5 css3 internet

You are not signed in. Login or sign up in order to post.