html – svg元素上的伪边_html-js-css

概述我有一个非常简单的文件(另见 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=" 我有一个非常简单的文件(另见 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"   ></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 – svg元素上的伪边全部内容，希望文章能够帮你解决html – svg元素上的伪边所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1099570.html

html – svg元素上的伪边

发表评论

评论列表（0条）