覆盖 iframe instagram 小部件上的内联 css 不起作用

Question

通常，当我想覆盖 iframe 中的某些 css 时，我会确保它更具体或使用 !important 并且到目前为止从未遇到任何问题。我正在尝试嵌入我最新的 4 张 instagram 照片，并且我不希望照片之间有任何空间。 AKA 我需要删除 iframe 内锚标签上的边距。我已经尝试使其具体化并使用！important。我还尝试使用 jquery 等到 iframe 加载并插入内联 css。这两种方法都适用于 iframe 标签，但不适用于其中的任何内容。

我的网站：http://chrisandlenzi.com/，Instagram 提要位于页面底部。我现在在我的 css 文件中有这个：

.media-grid li a {
    margin: 0 !important;
}

这是我正在尝试的 jquery：

    $('iframe').load( function() {
        $( '.no-border' ).each(function () {
            this.style.setProperty( 'margin', '0px', 'important' );
        });
    });

如果有人能帮我弄清楚如何做到这一点，那就太好了，但如果你至少知道为什么会发生这种情况，那也行。

Answer 1

我想通了！我正在使用 http://widget.websta.me 小部件，无论我尝试什么，包括 Andrew Lyndem 的回答，都没有任何效果。我刚刚切换了小部件，现在使用这个小部件而不是http://snapwidget.com/，只要我选择响应选项，“照片填充”设置就可以工作。当我没有检查响应设置时，无论我在那里放什么，它都会给我 5px。我仍然不知道为什么，但这是解决方法，以防其他人遇到同样的问题。