我正在研究响应式设计。 还有一个问题是我的台式电脑或Android手机上没有。
仅在iPhone上,访问链接上的框周围有黑色边框。 我找不到办法,如何删除那些黑色边框。
在我的屏幕截图中,您可以看到,我的意思。可能有一个特殊的css命令吗?
HTML:
<a href="link1.html">
<div class="col-xs-6 col-md-6 col-lg-4 box menu">
<div class="opacity"></div>
<div class="box_bg">
<i class="fa fa-info"></i><br/>
infomappe
</div>
</div>
</a>
<a href="link2.html">
<div class="col-xs-6 col-md-6 col-lg-4 box menu">
<div class="opacity"></div>
<div class="box_bg">
<i class="fa fa-credit-card"></i><br/>
Visitenkarte
</div>
</div>
</a>
CSS:
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
-ms-transition: all .15s linear;
-o-transition: all .15s linear;
transition: all .15s linear;
}
a:visited, a:focus, a:active {
text-decoration: none !important;
outline-color: none !important;
border: none !important;
}
a:hover{
text-decoration: none !important;
}
/* Boxes */
.box{
height:100px;
text-align: center;
color: #000;
padding: 0;
overflow: hidden;
}
.box i{
font-size: 35px;
padding-bottom:8px;
}
.box_bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 22px;
}
.menu .opacity{
border: 1px solid #EFEFEF;
}