不可预料的滚动条出现,处理方法:
- 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;