删除div周围的白色边框

Question

我试图制作一个检测移动设备处于纵向模式的页面。功能似乎工作正常，但布局有问题。
我的div标签周围有一个白色的边框，我似乎无法弄清楚它来自哪里。我查看了开发人员工具，但一无所获。将边框设置为0也不起作用。试图使用溢出：隐藏，虚无。

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就是导致这种情况的原因。

＆＃13;

＆＃13;

.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 {}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

---

因为人们似乎不能在这里看到它是我修复之前和之后。

正如你所看到的，就像OP所说的边界一样。

现在我们将img更改为div，以便正确显示。没有边界。