HTML – 响应svg没有获得野生动物园的全宽度

概述我有一个svg应该是100％的身体宽度,它适用于ie11,chrome和firefox – 但在safari中,svg的两侧都有一些空间,我无法摆脱它.任何帮助表示赞赏 – 请看这里的小提琴： http://jsfiddle.net/tbbtester/2apEh/ css： body{margin:0;padding:0;background:orange;}.top {position: a 我有一个svg应该是100％的身体宽度,它适用于IE11,Chrome和firefox – 但在safari中,svg的两侧都有一些空间,我无法摆脱它.任何帮助表示赞赏 – 请看这里的小提琴：
http://jsfiddle.net/tbbtester/2apEh/

CSS：

body{margin:0;padding:0;background:orange;}.top {position: absolute;wIDth: 100%;}.inner{height:0;position: relative;padding-top:3.2%;}svg{height: 100%;display:block;wIDth: 100%;position: absolute;top:0;left:0;}rect{stroke:none;fill:teal;}

标记：

<div >        <div >            <svg vIEwBox='0 0 100 3.2' preserveAspectRatio="xMIDYMID meet">                <rect x="0" y="0" height="3.2" wIDth="100"/>            </svg>        </div>    </div>

解决方法 在提到这个

Previous SO question

看来这个

preserveAspectRatio="xMIDYMID meet"

是问题.

如果你改成它

preserveAspectRatio="none"

问题已经解决了

JSfiddle Demo

总结

以上是内存溢出为你收集整理的HTML – 响应svg没有获得野生动物园的全宽度全部内容，希望文章能够帮你解决HTML – 响应svg没有获得野生动物园的全宽度所遇到的程序开发问题。

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