“保证金左侧”使Chrome中的fancybox缩小

Question

我正在使用fancybox 3在iframe中显示页面（页面A）。在本地服务器上（在Chrome中运行），这非常有用;然而，在线它没有 - iframe变得非常狭窄，并且快速检查显示Chrome将fancybox内容宽度注册为0.（在Safari中它可以正常工作。）

当我从页面A中的一个SVG中取出“margin-left”样式时，iframe会再次出现。但是，这不是一个可行的解决方案，因为没有左边距样式，页面A内容无法正确显示。

Here是令人讨厌的页面;有问题的盒子是左边第一个（“成长书架”）。 iframe中显示的页面为here。

我已经尝试过的事情：

• Change width and height of frame根据这篇文章和许多文章， 许多其他人，同时使用CSS和JavaScript
• 更改页面A的各个部分（尝试使用 尝试“位置：相对”和“左：xx％”而不是“margin-left” 把svg放在span / div中;试图改变身体的“显示”风格 块和内联块）

我已经花了太长时间，所以任何帮助都表示赞赏！

P.S。我知道代码是丑陋的，而且我可能没有完全按照惯例完成所有工作。试着把一些东西拉到一起。

Answer 1

解决！

CSS边距可以使svg / div / etc超出100％的宽度。我将SVG的宽度从100％更改为33％，并且只是因为它变小了而重新调整尺寸。