Css

Question

我无法在 Internet Explorer 上正确显示 select 输入，尽管它在 Firefox、Safari 和 Chrome 上运行良好。

Select 选项一直向下到左侧并且应该有 60px 的左填充，就像在 chrome、safari 和 firefox 上一样。

请在我准备的jsfiddle上测试一下。你能帮忙吗？

HTML

<div id="form-selector">    
<select name='someinput' id='someinput' class="form-control img-input">
<option value="" selected="selected">1</option>
<option value="">2</option>
</select>
</div>

CSS:

#form-selector select {
  overflow: -moz-hidden-unscrollable;
  width: 100%;
  height: 35px;
  background:#fff;
  margin-bottom:14px;
  font-size: 14px;
  color:#000000;
  -webkit-appearance: menulist;
}

// Firefox Fix
@-moz-document url-prefix() {
#form-selector select {
   text-indent: 30px;
} }


.img-input { 
background:url(http://placehold.it/60x30) no-repeat left center #ffffff !important;
  padding-left:60px; }

JS FIDDLE

https://jsfiddle.net/nitadesign/02uj91gp/15/

Answer 1

要解决 IE 中由 text-indent 引起的错误，您可以使用 padding-left，它适用于所有浏览器:)

#form-selector select {
  overflow: -moz-hidden-unscrollable;
  width: 100%;
  height: 35px;
  padding-left: 60px;
  background:#fff;
  margin-bottom:14px;
  font-size: 14px;
  color:#000000;
  -webkit-appearance: menulist;
}

请注意，您还需要删除添加的 Firefox-specific 修复程序，因为这不再是必需的：

// Firefox Fix
@-moz-document url-prefix() {
#form-selector select {
   text-indent: 30px;
} }

我创建了一个新的 fiddle 来展示它在所有浏览器中的正常工作 here。

希望对您有所帮助！ :)

Answer 2

我在 IE 上使用了以下 hack：（我使用的是 IE 11）

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     #form-selector select {
  padding-left: 60px;
}
}

已更新 JsFiddle：

https://jsfiddle.net/nitadesign/02uj91gp/16/

如果有人可以在 Safari、Edge 12 和比 11 更旧的 IE 版本上检查它，我会很感激。请告诉我。

Css - Select IE 上的选项（带背景图片）左填充或文本缩进问题

Css - Select Option (with background image) padding-left or text-indent issue on IE

forms

internet-explorer

cross-browser