IE11 - 如何在禁用的字段集中启用滚动条

Question

这里有一个我的页面的小例子。我需要禁用所有输入字段，但滚动条。这适用于Chrome和Firefox，但不适用于IE。

tbody{ 
 
    display:block; 
 
    height: 50px; 
 
    overflow-y: scroll; 
 
}

<fieldset disabled> 
 
    <table> 
 
     <thead> 
 
      <tr><th>test</th></tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> <td> <input type="text"/> </td> </tr> 
 
      <tr> <td> <input type="text"/> </td> </tr> 
 
      <tr> <td> <input type="text"/> </td> </tr> 
 
      <tr> <td> <input type="text"/> </td> </tr> 
 
      <tr> <td> <input type="text"/> </td> </tr> 
 
    </tbody> 
 
    </table> 
 
</fieldset>

什么建议吗？

Answer 1

也许这样？

tbody{ 
 
    display:block; 
 
    height: 50px; 
 
    overflow-y: scroll; 
 
}

<fieldset> 
 
    <table> 
 
    <tbody> 
 
     <tr> <td> <input type="text" disabled /> </td> </tr> 
 
     <tr> <td> <input type="text" disabled /> </td> </tr> 
 
     <tr> <td> <input type="text" disabled /> </td> </tr> 
 
     <tr> <td> <input type="text" disabled /> </td> </tr> 
 
     <tr> <td> <input type="text" disabled /> </td> </tr> 
 
    </tbody> 
 
    </table> 
 
</fieldset>

或者使用pointer-events（当然，用户可以通过输入标签，但可以用tabindex="-1"阻止，但话又说回来，为什么不加disabled）

fieldset tbody { 
 
    display: inline-block; 
 
    height: 50px; 
 
    overflow-y: scroll; 
 
} 
 
fieldset tbody input { 
 
    pointer-events: none; 
 
}

<fieldset> 
 
    <table> 
 
     <tbody> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     </tbody> 
 
    </table> 
 
</fieldset>

或者使用一个额外的div

fieldset div { 
 
    display: inline-block; 
 
    height: 50px; 
 
    overflow-y: scroll; 
 
}

<fieldset> 
 
    <div> 
 
    <table disabled> 
 
     <tbody> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     <tr> <td> <input type="text" /> </td> </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</fieldset>

Answer 2

我建议包装在一个额外的DIV字段集，并有适用您的样式。 IE似乎禁用了禁用元素上的滚动条功能。

.box { 
 
    display: inline-block; 
 
    height: 80px; overflow-y: scroll; 
 
}

<div class="box"> 
 
<fieldset disabled> 
 
<table> 
 
<tbody> 
 
    <tr> <td> <input type="text"/> </td> </tr> 
 
    <tr> <td> <input type="text"/> </td> </tr> 
 
    <tr> <td> <input type="text"/> </td> </tr> 
 
    <tr> <td> <input type="text"/> </td> </tr> 
 
    <tr> <td> <input type="text"/> </td> </tr> 
 
    </tbody> 
 
    </table> 
 
</fieldset> 
 
</div>