奇怪的滚动条

2018-07-03

不可预料的滚动条出现，处理方法:

html页面嵌入iframe,已设置宽高的百分比后仍然出现滚动条


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <iframe src="svg.svg" style="border:none;width: 100%;height: 100%;"></iframe>
</body>
</html>

原因： iframe和img标签类似，是inline-block标签，空白符被解析。

解决思路：首先考虑是不是设置了margin/padding。根据以上代码，排除内外边距的原因。
查阅网上资料，一般有两种方案。一种是改变父级样式：font-size: 0;或者line-height: 0。另外一种可能是
该标签的display属性值为inline-block（比如 iframe 、img），针对这个原因造成的解决办法就是改变inline-block自身样式，如display: block; 或者 vertical-align: middle;