非便携式CSS：按钮背景图像不会在某些移动浏览器中显示

Question

我有一些类似HTML / CSS按钮的组件，在大多数浏览器中显示都很好，但在某些浏览器中不起作用。

更确切地说，我正在尝试创建一些“按钮”，其中包含背景图像而不是文本。

问题是在某些移动设备上，图片无法显示。我无法确定何时失败的确切模式。

我希望专家的眼睛能够在下面的代码中找到不便携的东西。谢谢你的帮助！

注意：我已经检查过，图像文件本身没问题。实际上，它们在所有浏览器上都是孤立的，可以是<img>标签，也可以是背景。

在大多数浏览器（以及Chrome上的所有模拟器）中工作的所需输出如下所示：

当它不起作用时我得到的东西（只有一些移动设备）

HTML结构如下（同一组件的3种变体）：

<div class="gl_arrows">
    <div class="gl-btn_container gl-btn--left-arrow-anthra">
        <div class="gl-btn_text">Artiste précédent</div>
        <a href="#/pool/5554c64dd4c67a714bacda07/artist/traits-d-union" class="gl-btn_button"></a>
    </div>
    <div class="gl-btn_container gl-btn--rose-thumb">
        <div class="gl-btn_text" >Voter</div>
        <button class="gl-btn_button"></button>
    </div>
    <div class="gl-btn_container gl-btn--right-arrow-anthra">
        <div class="gl-btn_text">Artiste suivant</div>
        <a href="#/pool/5554c64dd4c67a714bacda07/artist/the-lemon-queen" class="gl-btn_button"></a>
    </div>
</div>

如您所见，每个“按钮”组件都是：

的组合

1. 容器元素
2. 一个span元素，用于保存按钮的文本
3. 'button'元素本身可以是<button>或<a>。

最后，这是我用来设计这个样式的LESS代码：

    @import "gl_base";
@import "gl_utils";

@gl-btn-diameter--xs: 50px;
@gl-btn-diameter--sm: 84px;
@gl-btn-diameter--lg: 96px;


// An element that contains the button and its text
.gl-btn_container {
  display: inline-block;
  text-align: center;
  margin: 6px 10px;
  margin-bottom: 0;
  vertical-align: middle;
}

// the text element of the button
.gl-btn_text {
  margin-bottom: 6px;
  font-size: 10px;
  @media (min-width: @gl-w-lg) {
    font-size: 15px;
  }
  text-transform: uppercase;
}

// applied to <a> or <button> with no content (they will have a background image).
.gl-btn_button { // sizes the button.
  position: relative;
  display: inline-block;

  height: @gl-btn-diameter--xs;
  width: @gl-btn-diameter--xs;

  @media (min-width: @gl-w-sm) {
    height: @gl-btn-diameter--sm;
    width: @gl-btn-diameter--sm;
  }
  @media (min-width: @gl-w-lg) {
    height: @gl-btn-diameter--lg;
    width: @gl-btn-diameter--lg;
  }

  text-align: center;

  border: none;
  padding: 0;

}

// mixin to add the image to the button.
.gl_btn_of-image(@url){
  display: inline-block;
  background: no-repeat url(@url) 0 0;
  background-size: cover;
}

// mixin that configures a whole button and its container
.gl_btn-config(@img; @color; @sel_img; @sel_color){

  .gl-btn_button {
    .gl_btn_of-image(@img); // add the background image
    &:active, &:focus, &:hover {
      .gl_btn_of-image(@sel_img);
    }
  }
  .gl-btn_text { // this styles the text element before the button itself.
    color: @color;
    &:active, &:focus,
    &:hover {
      color: @sel_color;
    }
  }

}

// these are some particular of these buttons.
.gl-btn--right-arrow-white {
  .gl_btn-config(@img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_demarrer_96.png"; @color: white;@sel_img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_demarrer_96.png"; @sel_color: white);
}

.gl-btn--left-arrow-anthra {
  .gl_btn-config(@img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_precedent_anthra_base_96.png"; @color: @gl_anthracite;@sel_img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_precedent_anthra_selection_96.png"; @sel_color: @gl_anthracite);
}

.gl-btn--right-arrow-anthra {
  .gl_btn-config(@img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_suivant_anthra_base_96.png"; @color: @gl_anthracite;@sel_img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_suivantva_anthra_selection_96.png"; @sel_color: @gl_anthracite);
}

.gl-btn--rose-thumb {
  .gl_btn-config(@img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_vote_base_96.png"; @color: @gl_rose;@sel_img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_vote_selection_96.png"; @sel_color: @gl_rose--dark);

  &.gl-btn--disabled {
    opacity: 0.5;
    .gl_btn-config(@img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_vote_base_96.png"; @color: @gl_rose;@sel_img: "https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_vote_base_96.png"; @sel_color: @gl_rose);
  }
}


.gl-btn_container--color(@color){
  .gl-btn_text {
    color: @gl_anthracite;
  }
}

.gl-btn_container--anthra {
  .gl-btn_container--color(@gl_anthracite);
}

@imports只导入一些变量（颜色和屏幕尺寸），没有任何关键或复杂。

Answer 1

这实际上并不是一个答案，但将其作为评论发布时间过长。不过，它可能会帮助您解决问题。

如果我是你，我会浏览CSS文件并查找相对较新的属性和选择器，这些属性和选择器可能在旧浏览器/操作系统中不起作用：background-size等。某些属性的属性排序不正确可能导致在旧浏览器中正确呈现元素。例如background的属性：

• background-color
• background-image
• 背景重复
• background-attachment
• 背景位置

这是正确的顺序，但我看到你已经这样设置了：

background: no-repeat url("https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_vote_base_96.png") 0 0;

如今，浏览器非常智能，可以理解并正确呈现您键入的任何内容。但是旧版浏览器明确地希望告诉他们想要按照他们编程的方式/顺序进行渲染。

这可能是你可以开始的事情。