不可移植的 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> 或<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: no-repeat url("https://s3.eu-central-1.amazonaws.com/bs-sncf-assets/logos/G%26C_B_vote_base_96.png") 0 0;

如今，浏览器已经足够智能，几乎可以理解并正确呈现您键入的任何内容。但较旧的浏览器希望明确告诉他们您希望按照他们编程的方式/顺序进行渲染。

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