在改变能见度时，div定位关闭。

Question

我试图用媒体查询隐藏一个锚定链接到tel。到目前为止，它按预期工作，但当我尝试用一个类似的图标和文本代替它，没有锚，它会被重新定位有点偏离线(我想顶部的0.5em边距)。不知道这是怎么回事。

这是我的代码片段。

我也在使用normalize.css。

​

/********************************************
CONTACT
********************************************/

#contact {
	border-top: solid 0.5em #0e2951;
	border-bottom: solid 0.5em #0e2951;
	background-color: #fff;
}

.contact-icon-box {
	width: 32%;
	display: inline-block;
	margin-top: 1.5em;
	text-align: center;
}
.contact-icon-link {
	width: 1em;
	margin: 0 auto;
	text-align: center;
	background-color: #3d7ddd;
	border-radius: 150px;
	font-size: 5em;
}

#contact p {
	padding: 1em 2em;
	margin-top: 1em;
}

#tablet-phone, #facebook-tablet, #email-tablet {
	display: none;
}

#tablet-phone p {
	margin: 0 auto;
}



/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
    body {
        background-color: lightblue;
    }

    #mobile-phone {
    	display: none;
    }

    #tablet-phone, #facebook-tablet, #email-tablet {
		display: inline-block;
	}

}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div id="contact">
	<div class="contact-icon-box">
		<a href="https://www.facebook.com/miha.sustersic.5"><div class="contact-icon-link ion-social-facebook">
		</div><p id="facebook-tablet">Miha Šušteršič</p></a>
	</div>

	<div class="contact-icon-box" id="mobile-phone">
		<a href="tel:+38631535919"><div class="contact-icon-link ion-ios-telephone">
		</div></a>
	</div>

	<div class="contact-icon-box" id="tablet-phone">
		<div class="contact-icon-link ion-ios-telephone">
		</div>
		<p>+386 31535919</p>
	</div>

	<div class="contact-icon-box">
		<a href="mailto:sustersic_miha@hotmail.com"><div class="contact-icon-link ion-email">
		</div><p id="email-tablet">sustersic_miha@hotmail.com</p></a>
	</div>
	<p>I am currently working for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
</div>

​

背景颜色调整只是为了检查媒体查询是否有效。

Answer 1

你的

#tablet-phone p {
    margin: 0 auto;
}

中的垂直区域。

#contact p {
    padding: 1em 2em;
    margin-top: 1em;
}

因此，非链接段落占用的垂直空间比链接段落要少，垂直对齐是自下而上的，因此图标向下移动以进行补偿。

可以通过添加一个更具体的选择器来防止这种情况，以确保特定的段落样式不会被覆盖：

#contact p, #contact #tablet-phone p {
    padding: 1em 2em;
    margin-top: 1em;
}

下面是更新的片段：

​

/********************************************
CONTACT
********************************************/

#contact {
	border-top: solid 0.5em #0e2951;
	border-bottom: solid 0.5em #0e2951;
	background-color: #fff;
}

.contact-icon-box {
	width: 32%;
	display: inline-block;
	margin-top: 1.5em;
	text-align: center;
}
.contact-icon-link {
	width: 1em;
	margin: 0 auto;
	text-align: center;
	background-color: #3d7ddd;
	border-radius: 150px;
	font-size: 5em;
}

#contact p, #contact #tablet-phone p {
	padding: 1em 2em;
	margin-top: 1em;
}

#tablet-phone, #facebook-tablet, #email-tablet {
	display: none;
}

#tablet-phone p {
	margin: 0 auto;
}


/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
    body {
        background-color: lightblue;
    }

    #mobile-phone {
    	display: none;
    }

    #tablet-phone, #facebook-tablet, #email-tablet {
		display: inline-block;
	}

}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div id="contact">
	<div class="contact-icon-box">
		<a href="https://www.facebook.com/miha.sustersic.5"><div class="contact-icon-link ion-social-facebook">
		</div><p id="facebook-tablet">Miha Šušteršič</p></a>
	</div>

	<div class="contact-icon-box" id="mobile-phone">
		<a href="tel:+38631535919"><div class="contact-icon-link ion-ios-telephone">
		</div></a>
	</div>

	<div class="contact-icon-box" id="tablet-phone">
		<div class="contact-icon-link ion-ios-telephone">
		</div>
		<p>+386 31535919</p>
	</div>

	<div class="contact-icon-box">
		<a href="mailto:sustersic_miha@hotmail.com"><div class="contact-icon-link ion-email">
		</div><p id="email-tablet">sustersic_miha@hotmail.com</p></a>
	</div>
	<p>I am currently working for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
</div>

​