Question

我很茫然，有这个问题已经有一段时间了。这是我在图像上定位的特定字形的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），它看起来像这样，根据字体大小从默认值增加多少，将glyphicon推向右侧（在这种情况下，它是10em，如果我不指定字体大小，它居中并与pc / mac相同）： thing2 http://image.bayimg.com/ad257f8849bf6ac27fbc8567973908a194e46676.jpg

任何人都有任何线索，为什么这只会在移动浏览器中弹出，我能做些什么来解决它？

非常感谢，谢谢。

Answer 1

尝试将位置“relative”添加到背景图像和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>

Bootstrap glyphicons在移动设备上与字体大小更改不对齐

1 个答案: