我有一个非常简单的文档(另见JSFiddle):
<style>
html, body, svg, div {
margin: 0;
padding: 0;
border: 0;
}
</style>
<body>
<svg id="foo"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
style="width: 768px; height: 1004px;">
</svg>
</body>
由于某种原因,该svg元素的底部边距为3px或4px(即,该body元素的高度为1007px,1008px甚至1009px; svg使用浏览器调试工具检查时,边距本身为0.)
如果我svg用a 替换div,则虚假边缘消失.Opera 12,Chrome 33,Firefox 26和Internet Explorer 11的行为是一致的,所以我确信这种行为符合设计和标准,我只是不明白.
Jos*_*ier 34
这是inline元素的常见问题.要解决此问题,只需添加即可vertical-align:top.
#foo {
background: #fff;
vertical-align:top;
}
值得注意的是,该vertical-align属性的默认值是baseline.这解释了默认行为.像top,middle和bottom等值将更正对齐方式.
或者,您可以使元素block级别.(例)
我有一个相关的问题,我有一个包含SVG的div:
<div id=contents>
<svg exported from illustrator>
</div>
在DIV中SVG上方和下方都有巨大的边距,即使是DIV中的vertical-align:top和SVG中的block:block.
我为SVG设置了"宽度:100%",使它们填满了页面.
解决方案是为SVG设置"高度:100%".他们已经显示在正确的高度,但添加它摆脱了奇怪的边缘.
我很想知道这是如何以及为什么有效.
| 归档时间： |
|
| 查看次数： |
20911 次 |
| 最近记录： |