1
Chromeの表のセルのパディングに問題が発生しています。表のセルに純粋なテキストが含まれていないと、パディングはまったく適用されないようです。Chromeで表のセルのパディングが発生する
私のマークアップ:
<table>
<tr>
<th></th>
<th class="account-picture"></th>
<th class="account-name">Name</th>
<th class="account-email">Email</th>
<th class="account-last">Last Sign in</th>
</tr>
<tr>
<td>
<fieldset>
<ul>
<li><input type="checkbox" id="enabled" name="test[]" value="enabled"></li>
</ul>
</fieldset>
</td>
<td class="account-picture">
<div class="online">
<img src="http://www.genengnews.com/app_themes/genconnect/images/default_profile.jpg"> </div>
</td>
<td class="account-name">test test test test test test test test test test test test test test test test test test</td>
<td class="account-email">test test test test test test test test test test test test test test test test test test</td>
<td class="account-last">15 April 2012 10:19 AM</td>
</tr>
</table>
CSS:
img{
height: 42px;
width: 42px;
}
td, th{
padding: 0 12px;
vertical-align: middle;
}
.account-picture{
width: 40px;
}
.account-name{
min-width: 100px;
}
.account-email{
min-width: 120px;
}
.account-last{
min-width: 140px;
}
table{
table-layout: fixed;
float: none;
width: 100%;
margin-top: 10px;
}
td, th{
word-wrap: break-word;
padding: 0 12px;
vertical-align: middle;
}
td:first-child, th:first-child{
width: 14px;
}
とフィドル:http://jsfiddle.net/5mPFk/1/
そして、これはそれがFirefoxの11のようにレンダリングするものです:
Chrome:18(最新):
IE9:
としてはではなく、クロムと、IEとFFが正常に動作し、見ることができます。なぜこれが起こっており、これに対して何が可能か?
もしもあなたの 'input'要素を閉じるのに役立つかもしれません:' 'ですが、Chromeがそれをうまく処理できないのは奇妙なことがわかります...(同じことがあなたの' img'要素btwにあります) – Torious
閉じた入力要素でも同じ問題が発生します。 HTML5 doctypeを使用している場合、入力タグを閉じる必要はないとは思いますが。 – F21