jquery - 去除 div 周围的白色边框

Question

我正在尝试制作一个页面来检测移动设备是否处于纵向模式。该功能似乎可以正常工作，但布局有问题。
我的 div 标签周围总是出现白色边框，而且我似乎无法弄清楚它的来源。我检查了 Developers Tools 并没有找到任何东西。将边框设置为 0 也不起作用。尝试使用 overflow: hidden, nada。

http://jsfiddle.net/6c4e00x0/4/

HTML

<div id="modal">
    <div>
        <div id="icon">
            <img id="rotate" />
        </div>

        <div id="msg"> 
            <a id="close" href="#">close</a>
        </div>
    </div>
</div>

CSS

#rotate {
    width:100%;
    height:300px;
    background:url("http://m.campolympia.com/assets/mobile/site-images/icon-horizontal.png") center center no-repeat;
}

#msg{
    position:relative;
    width:100%;
    text-align:center;
}

a {
    color:white;
}

Answer 1

用户错误地使用了 img。将 img 替换为 div。

img 应该像这样与图像一起使用:

<img src="smiley.gif" />

JSFiddle

注意: 任何看到红色页面的人都是因为窗口太小或太大，jQuery 是造成这种情况的原因。

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
}
body {
  min-height: 100%;
  background-color: red;
}
a {
  color: white;
}
#msg {
  position: relative;
  width: 100%;
  text-align: center;
}
#rotate {
  width: 100%;
  height: 300px;
  background: url("http://m.campolympia.com/assets/mobile/site-images/icon-horizontal.png") center center no-repeat;
}
img {}

<div id="modal">
  <div>
    <div id="icon">
      <div id="rotate"></div>
    </div>
    <div id="msg"> <a id="close" href="#">close</a>

    </div>
  </div>
</div>
<div id="content"></div>

---

因为人们似乎看不到它，这里是我修复前后的对比。

如您所见，有一个边框，就像 OP 所说的那样。

现在我们将 img 更改为 div 以便它可以正确显示。无边框。