html - 共享按钮在移动设备上导致样式错误

Question

我有以下代码:

<div class="social-share"> 
<span class="st_facebook_large"></span> 
<span class="st_twitter_large"></span> 
<span class="st_email_large"></span> 
<span class="st_sharethis_large"></span> 
<span class="st_plusone_button_large"></span> 
</div>

使用这个 CSS:

.social-share {
position:absolute;
z-index:0 !important;
}
.image {
position:absolute;
z-index:2;  
}

上面的 CSS 是自定义的，因此共享按钮旁边的图像不会干扰它们。

在移动设备上导致此样式错误:

我正在考虑做这样的事情，但它不起作用:

@media screen and (max-width: 768px) {
  .social-share {
     margin-bottom: 17px;
  }
}

URL to the scenario

问题:如何解决移动设备上的样式错误？

Answer 1

你的问题是使用“position: absolute;”这导致 margin 不起作用。您需要将其更改为“position:relative；”你会看到边距正常工作。无需针对此特定问题进行媒体查询。