禁用文本在 IE 和 Microsoft Edge 的网页上不起作用

Question

我编写了 CSS 来禁用网页中的数字选择（CSS 类“table_border”）。它在 Chrome 和 Firefox 上按预期工作。但是，当我们在 Edge 和 IE 浏览器中从顶部拖动时，我仍然可以选择数字。更多详细信息，请参阅下面的 sn-p。

.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>