我正在尝试创建一个页面,以检测移动设备是否处于纵向模式。该功能似乎正常运行,但是布局存在问题。
我的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
,以便可以正确显示。无边界。