我有一个div的高度设置为320像素,那么它的小孩被设置为100%的宽度.
这个小孩就是一个SVG文件,我把宽度设置为容器的200%.
在chrome和firefox工作正常,我得到一个很好的形象像这样:
HTML看起来像这样:
CSS / SASS看起来像这样:
.kit-template {
overflow: hidden;
position: relative;
height: 320px;
.svg-document {
width: 100%;
overflow: hidden;
margin: 0 auto;
/*position: absolute;
bottom: 0;*/
svg {
width: 200%;
path,polyline,polygon,rect {
cursor: pointer;
}
}
}
}
就像我所说的,Chrome,Firefox和IE Edge都可以正常工作.但是在IE11中我得到:
如果我检查这个元素,我可以看到SVG看起来像是在左边和右边都有填充,但是我可以向你保证.
有人知道为什么会发生这种情况吗?
更新1
我在codepen上创建了一个非常简单的版本,所以你可以看到这个问题.
这里是:
查看在chrome,firefox,Edge然后IE11.你会看到只有IE11有问题.