0

我的drupal表单中有以下内容：

$form['update'] = array(
  '#type' => 'submit',
  '#value' => t('Update cart'),
  '#submit' => array('uc_cart_view_form_submit'),
  '#attributes'=> array('class' => 'update_cart'),
);

以及相关的CSS：

#edit-update.update_cart
{
  float : left;
  border:0 none;
  font-size:0;
  cursor:pointer;
}

#edit-update.update_cart {
  background: url('/themes/mytheme/images/cart_page/update-cart.png') no-repeat scroll left top transparent;
  float: left;
  height: 22px;
  width: 115px;
}

在 Chrome 中，font-size 0 有效且不显示文本。这是我想要的行为，因为还有其他 css 添加了背景图像：

更新购物车按钮

但是，在我的 Android 平板电脑上，您可以看到文本。我该怎么做才能使文本不显示？我无法更改表单元素中的值，因为我需要该值来测试按下了哪个提交按钮（页面上有 4 个）。

4

2 回答 2

0

如何使用文本缩进？

text-indent:-9999px;
于 2013-10-30T15:32:04.133 回答
0

以上对我不起作用，所以我继续搜索，找到了一个很棒的解决方案。您必须调用零宽度字体类型 (webfont)，如下所示：

@font-face{
    font-family: 'zero-width';
    src: url('//cdn.jsdelivr.net/font-zero-width/1.0.0/zero-width.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'zero-width';
    src: url(http://:/) format("No-IE-404"),
         url('//cdn.jsdelivr.net/font-zero-width/1.0.0/zero-width.woff') format('woff'),
         url('//cdn.jsdelivr.net/font-zero-width/1.0.0/zero-width.svg') format('svg'),
         url('//cdn.jsdelivr.net/font-zero-width/1.0.0/zero-width.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

然后将其应用于必要的元素：

.element-to-set-the-font-to-zero{
font-family: 'zero-width';
}

演示：http: //jsfiddle.net/johnslegers/bczxxp6r/

或者更好的是，像这样的解决方法：color: transparent;

于 2016-11-24T11:16:39.413 回答