Media

Question

我遇到了一个非常奇怪的情况。我相信它会在Safari中发生，但不是100％肯定。它只发生在640或更少的媒体查询中。有什么问题是当设备进入该视口（640px或更低）时，我的框应该是2列和2行，就像它在jsfiddle中一样。除了我在Safari中所说的，即使使用iPhone6响应式工具栏打开的Chrome开发人员工具打开，问题也不会发生。

Click here to see it in a jsfiddle.

出现问题时，它看起来像这样：

B被移动到第2行，看起来好像正在应用margin-left而我的margin-right: 0没有生效。

但是，我在媒体查询中有以下内容。

.marketing-service:nth-child(2) {
    margin-right: 0;
}
.marketing-service:nth-child(3) {
    margin-left: 0;
}

nth-child()在Safari中不起作用吗？

有没有其他人知道这可能会发生什么事情对Safari不起作用？

＆＃13;

＆＃13;

$('#marketing-tab1').addClass('active');
	$('#marketing1').show();
	
	//For tabs to stay active
	$('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
	});

＆＃13;

#marketing-services {
	width: 80%;
	margin: 0 10%;
}
.marketing-service {
	display: inline-block;
	width: 22%;
	margin: 0 2%;
	height: 400px;
	background: #F0F0F0;
	position: relative;
	cursor: pointer;
}
.marketing-service:first-child {
	margin-left: 0;
}
.marketing-service:last-child {
	margin-right: 0;
}
.marketing-service:hover {
	background: rgba(0, 255, 170, .4);
	z-index: 1;
}
.marketing-service-wrap {
	padding: 10%;
	width: 80%;
}
.marketing-service-title {
	font-size: 1.6em;
	margin-bottom: 100px;
}
.marketing-img {
	width: 125px;
	height: 125px;
}
/*-- Down Arrow for boxes --*/
.marketing-service.active, #marketing-tab1.active {
	background: rgba(0, 255, 170, .4);
}
.marketing-service.active:after, .marketing-service.active:before, #marketing-tab1.active:after, #marketing-tab1.active:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
}
.marketing-service.active:after, #marketing-tab1.active:after {
	border-width: 0px;
	margin-left: 0px;
	border-color: rgba(0, 255, 170, .4);
	border-right-color: rgba(0, 255, 170, .4);
	margin-top: -30px;
}
.marketing-service.active:before, #marketing-tab1.active:before {
	border-color: transparent;
	border-top-color: rgba(0, 255, 170, .4);
	border-width: 36px;
	margin-left: -36px;
	margin-top: 0;
}
@media screen and (max-width:640px) {
/*--- Marketing Service Tabs -----*/
#marketing-services {
	width: 100%;
	margin: 0;
}
.marketing-service {
	display: inline-block;
	width: 45%;
	margin: 25px 5%;
	height: 250px;
}
.marketing-service:nth-child(2) {
	margin-right: 0;
}
.marketing-service:nth-child(3) {
	margin-left: 0;
}
.marketing-service-wrap {
	padding: 5%;
	width: 90%;
}
.marketing-service-title {
	font-size: 1.3em;
	margin-bottom: 60px;
}
.marketing-img {
	width: 75px;
	height: 75px;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
			<div class="marketing-service" id="marketing-tab1">
				<div class="marketing-service-wrap total-center">
					<h2 class="marketing-service-title">A</h2>
					<img src="../images/marketing-seo.png" class="marketing-img">
				</div>
			</div><div class="marketing-service" id="marketing-tab2">
				<div class="marketing-service-wrap total-center">
					<h2 class="marketing-service-title">B</h2>
					<img src="../images/marketing-ppc.png" class="marketing-img">
				</div>
			</div><div class="marketing-service" id="marketing-tab3">
				<div class="marketing-service-wrap total-center">
					<h2 class="marketing-service-title">C</h2>
					<img src="../images/marketing-conversion.png" class="marketing-img">
				</div>
			</div><div class="marketing-service" id="marketing-tab4">
				<div class="marketing-service-wrap total-center">
					<h2 class="marketing-service-title">D</h2>
					<img src="../images/marketing-email.png" class="marketing-img">
				</div>
			</div>
		</div>

＆＃13;

＆＃13;

＆＃13;