内联样式元素具有不同的水平间距跨浏览器答案

【问题标题】：Inline styled elements have different horizontal spacing cross browser内联样式元素具有不同的水平间距跨浏览器
【发布时间】：2013-01-03 12:04:36
【问题描述】：

我有一些内联显示的元素，它们之间有一些水平间距。这很好，但我需要间距量与当前不是相同的交叉凉亭。我可以在不使用浮点数的情况下实现这一目标吗？

我需要支持 IE7，所以我不能使用 inline-block，但如果绝对必要，我可以使用 IE7 样式表。

http://jsfiddle.net/2uBuu/3/

<div>
    <label>label</label> 
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div>
    <label>label</label>  
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>



<div>
    <label>label</label>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
     <select>
 </div>
 <div>
    <label>label</label>
    <select>
       <option>1</option>
       <option>2</option>
       <option>3</option>
     <select>
  </div>

div {
    background-color: blue;
    display: inline;
}
label {
    display: none;
}

【问题讨论】：

你没有关闭 SELECTs...开始这样做:)
我已经完成并更新了我的问题，但仍然遇到同样的问题。

标签： css cross-browser

【解决方案1】：

你仍然没有关闭 SELECTs（现在是第二部分）......

只需添加

select{
    padding: 0px;
    margin: 0px;
}

覆盖与 SELECT 框相关的浏览器特定行为...例如，如果未指定，chrome 会为其添加填充和边距。

这是一个关闭所有 SELEC 并指定填充和边距的小提琴，它适用于我：http://jsfiddle.net/2uBuu/6/

【讨论】：