Html 为什么选择选项在引导中获得填充？

我有这个标记：

<div style="direction: rtl; text-align: right;">
    <div class="form-inline">
        <div class="form-group col-lg-3">
            <label class="hidden-sm hidden-xs">بازه زمانی </label>
            <select class="form-control">
                <option value="1">1 روز گذشته</option>
                <option value="2">2 روز گذشته</option>
                <option value="3" selected="selected">3 روز گذشته</option>
                <option value="4">1 هفته گذشته</option>
                <option value="5">2 هفته گذشته</option>
                <option value="6">1 ماه گذشته</option>
                <option value="0">تعیین زمان</option>
            </select>
        </div>
    </div>
</div>

بازه زمانی 
1 روز گذشته
2 روز گذشته
3 روز گذشته
1 هفته گذشته
2 هفته گذشته
1 ماه گذشته
تعیین زمان

如您所见，我使用的是bootstrap v3.1.1。问题是，当我在Chrome中看到页面时，有些选项会被填充：

---

这是一个工作演示。我试图通过css删除所有的填充和边距；但一切都没有改变。你知道为什么会这样吗

您可以通过为

元素设置

text align

属性来解决此问题：

.form-control option {
  text-align: right;
}

在Chrome

方向上显示行：rtl未正确对齐文本并尝试重新计算其位置，因为选项更改了其在显示中的位置

我在Mac电脑上安装了Chrome 37，无法重现该问题。这里看起来不错，没什么变化。我以前测试过。但是谢谢你。@Javad_Amiry你用什么浏览器？也许这是特定于浏览器的？艾美？你在其他浏览器上试用过吗？我正在使用Google Chrome版本37.0.2062.120m@Javad_Amirywindows？@Javad_Amiry我已经在Ubuntu和MacOSX上进行了测试，一切都很好。我的修复只在最新的谷歌浏览器上的Ubuntu下起作用。在MacOSX下，我看不出两个版本都有任何问题。似乎这只是windows的问题。无论如何，为谷歌Chrome设置选项元素的样式是个坏主意，因为没有跨浏览器解决方案。您可以在这里找到更多信息。我建议您使用JavaScript创建自己的选择控件，或者处理您所拥有的内容。