Html 媒体查询未使用Safari正确格式化

我遇到了一个非常奇怪的情况。我相信它发生在狩猎中，但不是100%确定。这只发生在我的640或更少的媒体查询中。错误的是，当设备进入该视口（640px或更低）时，我的框应该是2列2行，就像在JSFIDLE中一样。除了我在Safari中说过的，它在任何地方都是这样工作的，即使Chrome开发工具在iPhone6响应工具栏打开的情况下也不会出现问题

出现问题时，情况如下所示：

B移动到第二行，看起来好像应用了

左边距
，而my
右边距：0
未生效


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

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

nth-child（）
在Safari中不起作用吗

其他人知道会发生什么事情使它不适合Safari吗


$（'#marketing-tab1'）.addClass（'active'）；
$（#marketing1'）。show（）；
//使选项卡保持活动状态
$（“.marketing service”）。单击（函数（）{
$（'.marketing service.active'）.removeClass（'active'）；
$（this.toggleClass（'active'）；
//获取要显示的服务显示框
var item_number=$（this.attr（'id'）。replace（'marketing-tab'，''）；
/*$（'html，body'）。设置动画({
scrollTop:$（“#服务显示框”）.offset（）.top
}, 1500);*/
$（“#marketing”+项目编号）.show（）.同级（“.marketing服务部分”）.hide（）；
});
#营销服务{
宽度：80%；
利润率：0.10%；
}
1.市场推广服务{
显示：内联块；
宽度：22%；
利润率：0.2%；
高度：400px；
背景：#f0；
位置：相对位置；
光标：指针；
}
.营销服务：第一个孩子{
左边距：0；
}
.营销服务：最后一个孩子{
右边距：0；
}
.营销服务：hover{
背景：rgba（0255170.4）；
z指数：1；
}
.营销服务包装{
填充：10%；
宽度：80%；
}
.市场推广服务名称{
字号：1.6em；
边缘底部：100px；
}
.市场营销{
宽度：125px；
高度：125px；
}
/*--框的向下箭头--*/
.marketing-service.active，#marketing-tab1.active{
背景：rgba（0255170.4）；
}
.marketing service.active:after、.marketing service.active:before、#marketing-tab1.active:after、#marketing-tab1.active:before{
最高：100%；
左：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
}
.营销服务.活动：之后，#营销-tab1.活动：之后{
边框宽度：0px；
左边距：0px；
边框颜色：rgba（0,255,170,4）；
右边框颜色：rgba（0,255,170,4）；
利润上限：-30px；
}
.营销服务.活动：之前，#营销-tab1.活动：之前{
边框颜色：透明；
边框顶部颜色：rgba（0、255、170、4）；
边框宽度：36px；
左边距：-36px；
边际上限：0；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
/*---营销服务标签-----*/
#营销服务{
宽度：100%；
保证金：0；
}
1.市场推广服务{
显示：内联块；
宽度：45%；
利润率：25px5%；
高度：250px；
}
.营销服务：第n个孩子（2）{
右边距：0；
}
.营销服务：第n个孩子（3）{
左边距：0；
}
.营销服务包装{
填充：5%；
宽度：90%；
}
.市场推广服务名称{
字体大小：1.3em；
边缘底部：60px；
}
.市场营销{
宽度：75px；
高度：75px；
}
}

A.
B
C
D
我目前正在运行Safari版本10.0.2（12602.3.12.0.1）。一开始，我没有改变你的小提琴，视图如你所预期/描述（A和B对齐）。您是否尝试过更改@media查询？我将媒体查询改为
@media screen and（max width:768px）
，并认为它的响应更好。媒体查询适用于所有其他类型的设备，因此不确定。