禁用文本不适用于IE和Microsoft Edge的网页

Question

我写了CSS来禁用网页中数字的选择（CSS类“ table_border”）。 Chrome和Firefox可以正常使用。但是，当我们在Edge和IE浏览器中从顶部拖动时，我仍然可以选择数字。请找到下面的代码片段以获取更多详细信息。

.table {
  width: 100%;
}

.tableText>.table_head th {
  color: #fff;
  text-align: left;
}

.tableText {
  background: #5d5d5d;
  padding: 3px;
}

.table_border {
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;
}

.table-striped>tbody>.row_border:nth-child(even)>td,
.table-striped>tbody>.row_border:nth-child(odd)>td {
  background-color: #f9f9f9;
}

<div class="tableText">
  <table class="table table-condensed table-striped table_head">
    <thead>
      <tr>
        <th colspan="2">Python</th>
      </tr>
    </thead>

    <tbody>
      <tr class="row_border">
        <td class="table_border">1</td>
        <td>try:</td>
      </tr>
      <tr class="row_border">
        <td class="table_border">2</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;x= 1/0</td>
      </tr>
      <tr class="row_border">
        <td class="table_border">3</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr class="row_border">
        <td class="table_border">4</td>
        <td>except ZeroDivisionError:</td>
      </tr>
      <tr class="row_border">
        <td class="table_border">5</td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;print ("You can't divide by zero, you're silly.")</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您可以使用不错的技巧psuedo element

psuedo element从来都不是selectable，因此您可以将:before创建为tr td:first-child，并用aria-label=""设置所需的值

查看此处：

.table {
  width: 100%;
}
.tableText>.table_head th {
  color: #fff;
  text-align: left;
  margin:0;
}
.tableText {
  background: #5d5d5d;
  padding: 5px;
}
tr td:first-child:before {
  content: attr(aria-label);
  border-right: 5px solid #5d5d5d;
  padding: 8px;
}
.table-striped>tbody>.row_border:nth-child(even)>td,
.table-striped>tbody>.row_border:nth-child(odd)>td {
  background-color: #f9f9f9;
}

<div class="tableText">
  <table class="table table-condensed table-striped table_head">
    <thead>
      <tr>
        <th colspan="2">Python</th>
      </tr>
    </thead>

    <tbody>
      <tr class="row_border">            
        <td aria-label="1">try:</td>
      </tr>
      <tr class="row_border">           
        <td aria-label="2">&nbsp;&nbsp;&nbsp;&nbsp;x= 1/0</td>
      </tr>
      <tr class="row_border">            
        <td aria-label="3">&nbsp;&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr class="row_border">           
        <td aria-label="4">except ZeroDivisionError:</td>
      </tr>
      <tr class="row_border">            
        <td aria-label="5">&nbsp;&nbsp;&nbsp;&nbsp;print ("You can't divide by zero, you're silly.")</td>
      </tr>
    </tbody>
  </table>
</div>