宽度为 100% 的 SVG 溢出其容器
SVG with width 100% overflows its container
在下面的代码片段中,添加 svg 元素会导致出现垂直滚动条。删除 svg 会删除滚动条。我想了解它为什么会发生以及是否有一个不可怕的解决方案(例如 width:99%;height:98% 解决了它,但那是一个令人作呕的解决方案)。
我真的不能删除上面的 DIV 样式,因为其他 html 结构也位于这些需要它们的容器中。
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
svg 上的绿色边框和框大小只是为了让我们可以看到 svg 的边缘,最终不需要它
如果我将 svg 更改为 div,并改为将 svg css 应用于 div,则不会出现滚动条,因此似乎有些不同svg 元素。
我已经在 firefox 和 IE 中测试过了。两者都显示滚动条,但 IE 显示的可滚动内容稍微多一些
从 .menuquery
中删除 overflow: auto;
:
.menuquery {
border: 1px solid #ccc;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
Svg
是 inline
元素,将 font-size: 0;
设置为 .menuquery
将解决此问题
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
font-size: 0;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
或者您可以将 display:block
设置为 svg
。更新于 。
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
display:block;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
在下面的代码片段中,添加 svg 元素会导致出现垂直滚动条。删除 svg 会删除滚动条。我想了解它为什么会发生以及是否有一个不可怕的解决方案(例如 width:99%;height:98% 解决了它,但那是一个令人作呕的解决方案)。
我真的不能删除上面的 DIV 样式,因为其他 html 结构也位于这些需要它们的容器中。
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
svg 上的绿色边框和框大小只是为了让我们可以看到 svg 的边缘,最终不需要它
如果我将 svg 更改为 div,并改为将 svg css 应用于 div,则不会出现滚动条,因此似乎有些不同svg 元素。
我已经在 firefox 和 IE 中测试过了。两者都显示滚动条,但 IE 显示的可滚动内容稍微多一些
从 .menuquery
中删除 overflow: auto;
:
.menuquery {
border: 1px solid #ccc;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
Svg
是 inline
元素,将 font-size: 0;
设置为 .menuquery
将解决此问题
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
font-size: 0;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>
或者您可以将 display:block
设置为 svg
。更新于
.menuquery {
border: 1px solid #ccc;
overflow: auto;
box-sizing: border-box;
}
.xainnersubformdefault {
/* allows the svg to autosize */
width: 100%;
height: 100%;
}
.xadatabox {
height: 100%;
/* essential for jtable to scroll and not leak */
}
.datachart {
width: 100%;
height: 100%;
/* position:relative; */
/* to make an svg fill its container, this is required, see Whosebug 9566792 */
}
svg {
width: 100%;
height: 100%;
border: 1px solid green;
box-sizing: border-box;
display:block;
}
<div class="menuquery" style="width:300px;height:200px">
<div class="xa xafield xadatabox">
<div class="xainnersubformdefault">
<div class="datachart">
<svg></svg>
</div>
</div>
</div>
</div>