Question

我有以下标记+ CSS，可以在所有桌面浏览器上正常使用，甚至可以在Android上的Firefox中使用，但::after内容无法在Chrome中呈现（或者＆＃34 ;默认＆＃34;浏览器）在Android上。

为什么会出现这种情况？

Chrome 42.0.2311 Android 4.4.3（HTC One M7）

如果它有帮助，可以使用以下代码： http://codepen.io/sbeliv01/full/LVEQKz/

HTML / CSS

＆＃13;

.contactForm {
  width: 100%;
  margin: 0 auto;
}

.contactForm-wrapper {
  padding: 4em;
  background: #efeeee;
}

.contactForm select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  width: 100%;
  color: #002d57;
  font-size: 1.5em;
  font-weight: 100;
  line-height: 1.5em;
  background: #FFF;
  padding: .5em 2em .5em .5em;
  border: none;
}

.contactForm select::-ms-expand {
  display: none;
}

.contactForm .select {
  position: relative;
}

.contactForm .select::after {
  content: "\25BE";
  display: block;
  color: #0084ff;
  font-size: 16px;
  position: absolute;
  top: 50%;
  right: 1.5em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.contactForm .column {
  width: 100%;
}

＆＃13;

<div class="contactForm-wrapper">
    <form class="contactForm">
        <div class="row">
            <div class="column select">
                <select name="co" id="co">
                    <option value="">Select a country...</option>
                    <option value="">Country 1</option>
                    <option value="">Country 2</option>
                    <option value="">Country 3</option>
                </select>
            </div>
        </div>
    </form>
</div>

＆＃13;

Answer 1

似乎早期版本的Android无法在Chrome上显示\25BE，这听起来像个错误。作为一种解决方法，您可以将其更改为\25BC（类似形状），然后正确显示。或者，您也可以使用字体图标。

＆＃13;

.u25BE::after {
    content: "\25BE"; 
}
.u25BC::after {
    content: "\25BC"; 
}

＆＃13;

<div class="u25BE">25BE</div>
<div class="u25BC">25BC</div>

＆＃13;

JSFiddle： http://jsfiddle.net/fbsrmgru/

::在伪元素之后，一个下拉箭头，不在Android上显示

1 个答案: