使用媒体查询在div中放置svg

Question

我已将svg代码嵌套在div中，我将其用作网页中的链接，旨在在iPad上全屏查看（无格式），并提供纵向和横向媒体查询。 div的布局在两个方向都完美无瑕，但在横向上，svg元素显示的效果比应有的低10个左右，但当div元素被触及时，{{1}艺术品神奇地将自己重新定位到它打算去的地方。在纵向模式下，一切都很好。在横向模式下可能导致什么？它可能是某种方式的css或iPad渲染引擎吗？

问题可以在http://www.fmglobal.com/multimedia/airmic2014.html看到 但不知何故，此链接仅在您将其复制并粘贴到新的浏览器选项卡时才有效。

的CSS：

svg

Answer 1

将您的CSS更改为：

nav svg {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

它应该有效