为什么在IE11中缺少图标并压缩了文本？
我在Bootstrap 4中创建了此站点。它可以在所有浏览器上正常运行，如下所示：
但是当我在Internet Explorer 11上打开时，会发生以下情况：
我尝试了很多事情，但仍然无法正常工作。这是我使用的代码：
.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;
}
/* for custom scrollbar for webkit browser*/
/* EXCEPTIONS */
.row-c-grey {
background-color: #646464 !important;
color: #ffffff !important;
}
.th-w-50 {
width: 50% !important;
}
.td-w-40 {
max-width: 40px !important;
}
@media screen and (max-width: 767px) {
.td-w-40 {
max-width: 100% !important;
}
}
@media screen and (max-width: 767px) {
.display-none {
display: none !important;
}
}
.table-permissions tbody td:last-child {
background-color: #ffffff !important;
color: #000000 !important;
}<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> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
有人可以帮助我吗？
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？