我可以做些什么来删除出现在这个 SoundCloud 小部件周围的 1px 边框吗？

Question

As you can see ，小部件周围有一个 1px 的边框。它只出现在 iOS。我可以在检查器中看到导致此问题的 CSS：

.widget {
  ...
  border: 1px solid #e5e5e5;
  ...
}

这是 iframe：

<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/307068209&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true" scrolling="0" frameborder="0"></iframe>

我知道 CSS 不能影响 iframe 中来自不同域的元素，但客户说它看起来很糟糕。我可能正在做些什么来使它出现吗？如果没有，有什么方法可以删除它吗？

Answer 1

您可以 hide/clip 整个 iframe 的最外层 1px，但这可能会或可能不会产生理想的效果。 http://codepen.io/anon/pen/evKLMr

div {
  overflow: hidden;
  width:398px;
  height:198px;
}

iframe {
  position: relative;
  top:-1px;
  left:-1px;
  width: 400px;
  height: 200px;
}

Answer 2

我最终听取了这个 post 的建议：

CSS: Inset shadow by parenting div over iframe

并添加了这个坏男孩：

.iframe-wrapper:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .4) inset;
  z-index: 1;
  width: 100%;
  height: 100%;
}

边框隐藏得很好

Answer 3

应该是

frameborder="no"

而不是

frameborder="0"

我可以做些什么来删除出现在这个 SoundCloud 小部件周围的 1px 边框吗？

Is there anything I can do to remove the 1px border appearing around this SoundCloud widget?

css

border

widget

ios

soundcloud