美文网首页
宽度设置width:100%,出现水平滚动条

宽度设置width:100%,出现水平滚动条

作者: IT飞牛 | 来源:发表于2018-03-23 16:38 被阅读0次

    例如:

    <div class="d1" style="width:500px; height:300px; overflow-y:auto;">
      <div class="d2" style="width:100%">
     //代码块
     </div>
    </div>
    

    要达到的效果是,如果d2的高度大于300px时,自动出现垂直滚动条,在ie7+都正常;
    但是ie7和ie-的浏览器时,d2=500px,再加上垂直滚动条的宽度=20px,实际内部的宽度就=520px,这个宽度大于d1的500,所以d1会出现水平滚动条。
    解决方案:
    针对ie7、ie6设置内部d2的宽度,

    ie浏览器hack
    .demo {
        padding:10px;
        padding:9px\9; /* all ie */
        padding:8px\0; /* ie8-9 目前应用于IE8的单独hack,情况比较少 */
        *padding:5px; /* ie6-7 */
        +padding:7px; /* ie7 */
        _padding:6px; /* ie6 */
    }
    

    这是所有ie的hack了,360用的ie内核,跟你自己本机的ie有关系

    相关文章

      网友评论

          本文标题:宽度设置width:100%,出现水平滚动条

          本文链接:https://www.haomeiwen.com/subject/rkuxcftx.html