Question

bootstrap选择在firefox和chrome中的呈现方式不同：

火狐：

铬

两个浏览器如何呈现相同的方式？最好是在Chrome中使用。

我的问题与这个问题不同：Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox

因为问题不是宽度或高度，问题是选择字段中的三角形（在右侧），比浏览器渲染这个三角形的方式完全不同，下面的问题的答案不适用于此情况下。

Answer 1

他们不会以同样的方式呈现。每个浏览器看起来都不一样，Explorer就是最好的！

我今天正在努力解决这个问题！你可以有一个背景div，包括一个边框和一个倒置三角形的背景图像在右侧。然后在第一个选择的div之上有一个跨度（在你的情况下＆＃34; 1＆＃34;）。然后将选择菜单放在div / span的顶部，绝对定位和零不透明度。这使得选择菜单的浏览器默认值根本不显示。

http://codepen.io/ruchiccio/pen/zqbaKN

<div class="selector">
     <span>Show 24</span>
      <select class="form-control">
        <option value="">Show 24</option>
        <option value="">Show 48</option>
        <option value="" selected>Show 96</option>
        <option value="">View all</option>
      </select>
    </div>

Answer 2

如果对某人有用，解决我问题的代码就是：

    select.custom {
                        background-image: url("https://lh3.googleusercontent.com/-UO0rQxRXKW0/VzN-mqXyiUI/AAAAAAAAPgM/XQibxHl_LcI57GDUV49IUQUYf6_OUvkngCCo/s166/Untitled-1.gif");
                        -moz-appearance: none;
                        padding-right: 25px;
                        background-repeat: no-repeat;
                        background-position: right center;
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                    }
<select class="form-control custom">
  <option>1</option>
  <option>2</option>  
</select>

我在上面的答案中根据Rachel S传递的示例/链接完成了此代码，链接为：http://codepen.io/ruchiccio/pen/zqbaKN

引导程序选择在firefox和chrome中的呈现方式不同

2 个答案: