Question

如果用html编写此代码，则滚动条会显示在IE中，但在Chrome和Microsoft Edge中，滚动条会翻倍。

如果我删除此代码，则滚动条仅出现在Chrome和Microsoft Edge中。

如何解决此问题？

<style type="text/css">
html,body{
    height:100px;
    min-height:100%;       
    overflow:auto;
    border-top:0px;  

}
</style>

Answer 1

将浏览器窗口减小到该值时，图层停止更改其大小，并出现水平滚动条。使用overflow-x属性，滚动条被隐藏。

尝试使用以下值：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Scroll bars</title>
  <style>
   html { overflow-x: hidden; }
   div { 
    min-width:  800px; /* Minimum width */
    background: #fc0;  /*Background color*/
    padding: 10px;  /*Fields around text */
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

overflow-x和overflow-y属性包含在CSS3规范中，并且在检查CSS2.1上的样式时未经过验证。

您还可以使用СSS代码：

<style type="text/css">
    html,body{
        height:100px;
        min-height:100%;       
        overflow-y: scroll;
        border-top:0px;  

    }

祝你好运

Answer 2

将其代替overflow:auto;更改为overflow-y: scroll;

<style type="text/css">
    html,body{
        height:100px;
        min-height:100%;       
        overflow-y: scroll;
        border-top:0px;  

    }

在IE 11+中测试

修复IE中的滚动条问题

2 个答案: