html – svg元素上的伪边

前端之家收集整理的这篇文章主要介绍了html – svg元素上的伪边前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个非常简单的文件(另见 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元素的底边距为3像素或4像素(即body元素的高度为1007像素,1008像素甚至1009像素;当使用浏览器调试工具进行检查时,svg边距本身为0).

如果我用一个div替换svg,则虚假的边缘消失. Opera 12,Chrome 33,Firefox 26和Internet Explorer 11的行为是一致的,所以我相信行为是符合设计和标准的,我只是不明白.

解决方法

这是内联元素的常见问题.要解决这个问题,只需添加vertical-align:top.

UPDATED EXAMPLE HERE

#foo {
    background: #fff;
    vertical-align:top;
}

值得注意的是,vertical-align属性的默认值为baseline.这解释了默认行为.诸如顶部,中间和底部的值将校正对齐.

或者,您可以使元素块级别. (example)

猜你在找的HTML相关文章