我正在尝试创建一个页面,以检测移动设备是否处于纵向模式。该功能似乎正常运行,但是布局存在问题。
我的div标签周围始终出现白色边框,但似乎无法弄清楚它的来源。我检查了开发人员工具,却一无所获。将边框设置为0也不起作用。尝试与溢出一起使用:隐藏,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;
}

最佳答案

使用错误地使用了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,以便可以正确显示。无边界。

10-05 20:41
查看更多