テーブルと2列が並んでいます。最初のものにはテキスト入力があり、もう1つにはemにマージンがあり、その中に2つのインラインブロック要素があるコンテナdivがあります。
Firefox、Safari、さらには Opera でもすべて問題ありません。しかし Chrome では、2 番目のインライン ブロック要素が下にシフトされます。興味深いことに、コンテナーのマージン (左) をピクセル単位で設定すると、これは発生しません。
ここにフィドルがあります：http://jsfiddle.net/inhan/bttBs/
構造は次のとおりです。
<table>
<tr>
<td><input type="text" /></td>
<td>
<div class="buttons">
<a href="#" class="button reset"><span>Reset</span></a>
<a href="#" class="button submit"><span>Submit</span></a>
</div>
</td>
</tr>
</table>
そして、これが大まかなCSSです
body {
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
}
table,tbody,tr,td {
border-spacing:0;
margin:0;
padding:0;
}
input[type="text"] {
width:11em;
border:1px solid #BBB;
padding:4px 3px;
margin:2px;
}
.buttons {margin-left:1em} /* set this to 13px */
a.button {
text-decoration:none;
outline:none;
display:inline-block;
*display:inline; zoom:1; /* IE 6/7 */
width:65px;
height:26px;
margin:0 1px;
font-family:'Open Sans';
font-size:0.9em;
text-align:center;
color:#333;
cursor:pointer;
border-style:none;
/* there's a bg image here */
background-color:lightgray;
}
a.button span {
display:block;
margin:4px 0;
}
そこで何が起こっているか知っている人はいますか？