Bootstrap glyphicons 在移动设备上因字体大小变化而错位答案

【问题标题】：Bootstrap glyphicons misaligning on mobile with font size changeBootstrap glyphicons 在移动设备上因字体大小变化而错位
【发布时间】：2019-09-17 15:16:26
【问题描述】：

我很茫然，这个问题已经有一段时间了。这是我放置在图像顶部的特定字形图标的 css：

css

.glyphicon-play-circle{
    font-size: 10em;
    position: absolute;
    color: #474747;
    opacity: 0.6;
    transition: opacity .3s;
    height: 201px;
    width: 201px;
    margin-top: -1px;
    border-radius: 6px;
    z-index:99;

}

在我看来是这样的，glyhpicon 在表单的提交按钮中呈现，上面的 css 将它定位在下面提到的图像之上：

html

  <div class="media" style="position:relative;">
      <!--play form-->
      <%= form_tag posts_play_path, :method => 'get', :remote => true do %>
        <%= hidden_field_tag(:post_id, post.id) %>
        <button type="submit" class="img-rounded glyphicon glyphicon-play-circle"></button>
      <% end %>
      <!-- end play form-->
      <img class="media-object img-rounded pull-left" style="width: 200px; height: 200px;" src="<%= post.image_url %>">
  </div>

在 PC/Mac 浏览器上，字形图标位于图像顶部，非常适合

在移动浏览器上（在 iphone 上测试过 chrome 和 safari），看起来像这样，其中根据字体大小从默认值增加了多少（在这种情况下，它是 10em，如果我不要指定字体大小，它居中并且与 pc/mac 相同）：
_{（来源：bayimg.com）}

任何人都知道为什么这只会在移动浏览器中弹出，我可以做些什么来解决它？

非常感谢，谢谢。

【问题讨论】：

标签： html css twitter-bootstrap glyphicons

【解决方案1】：

尝试将“相对”位置添加到背景图像和 z-index 值。另外，我会切换元素的顺序，因为它更有意义：

<div class="media" style="position:relative;">
    <img class="media-object img-rounded pull-left" style="position:relative; z-index:1; width: 200px; height: 200px;" src="<%= post.image_url %>">

    <!--play form-->
        <%= form_tag posts_play_path, :method => 'get', :remote => true do %>
            <%= hidden_field_tag(:post_id, post.id) %>
                <button type="submit" class="img-rounded glyphicon glyphicon-play-circle"></button>
            <% end %>
    <!-- end play form-->
</div>

【讨论】：