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

您可以隐藏/剪辑整个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

我最后接受了这篇文章的建议：

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边框吗？

3 个答案: