莫名其妙出现的浏览器滚动条
2017-09-12 本文已影响37人
oNexiaoyao
不可预料的滚动条出现，处理方法:
- 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;
