在Chrome中对齐下拉列表

Question

我正在尝试将类似于我的文本字段的下拉列表右对齐。
它适用于Firefox和IE，但我无法弄清楚它为什么不能在Chrome中正确对齐。

HTML

<div id="metaDataEditInner"> 
    <label>Document name</label> 
    <input class="field"></input> 
    <label>Document description</label> 
    <input class="field"></input> 
    <label>Document remarks</label> 
    <input class="field"></input> 
    <label>Document type</label> 
    <select class="dropdownfield"> 
    </select> 
    <br /> 
    <div style="clear:both"> 
     <button id="test" class="defaultButton">Save metadata 
     </button> 
    </div> 
</div> 

CSS

#metaDataEditInner 
{ 
    margin: .5em 5px; 
    text-align: right; 
    width: 550px; 
} 

#metaDataEditInner label 
{ 
    float: left; 
    line-height: 1em; 
    margin-top: 3px; 
} 

#metaDataEditInner .field 
{ 
    border: 1px solid black; 
    width: 350px; 
    font-size: 12px; 
    line-height: 1em; 
    padding: 4px; 
    margin-bottom: 10px; 
} 

#metaDataEditInner .dropdownfield 
{ 
    border: 1px solid black; 
    width: 360px; 
    font-size: 12px; 
    line-height: 1em; 
    padding: 4px; 
    margin-bottom: 10px; 
    color:Black; 
} 

任何想法的？

我做了一个小提琴来说明问题

http://jsfiddle.net/ZE5ss/2/

THX！

Answer 1

只需卸下<br />的</select>后。在铬上工作，请参阅this fiddle。

Answer 2

我不想发言，但如果我看到你的标记是完全错误的。

1）总是把表格元素放在<form>里面。

2）输入 & 按钮是自闭合元件。像这样写：

<input class="field" /> 
<button id="test" class="defaultButton" value="Save metadata" /> 

3）选择没有option标签是不行的。像这样写：

<select class="dropdownfield"> 
    <option></option> 
</select> 

Answer 3

在所有的浏览器试试这个代码，其做工精细：

<div id="metaDataEditInner"> 
<table> 
<tr> 
<td> 
    <label>Document name</label> 
     </td> 
     <td> 
    <input class="field"></input> 
    <tr> 
<td> 
    <label>Document description</label> 
     </td> 
     <td> 
    <input class="field"></input>. 
    <tr> 
<td> 
    <label>Document remarks</label> 
     </td> 
     <td> 
    <input class="field"></input> 
    <tr> 
<td> 
    <label>Document type</label> 
     </td> 
     <td> 
    <select class="dropdownfield"> 
    </select> 
    <tr> 
<td> </td> 
     <td> 
     <button id="test" class="defaultButton">Save metadata 

     </button> 

    </tr> 
    </table> 
    </div>