我在尝试调整表格中的布局时遇到了一些严重的问题。在 Firefox 中,我得到奇怪的顶部/底部填充与所有文本不一致。在 Firefox 和 IE8 中,我似乎也无法让我的图标在它们的单元格中垂直居中显示。
见如下:
替代文字 http://www.graphicsdistrict.com/css-issue.png
这是我的表格 css:
table.maxwidth {
width: 100%;
}
table.standard th {
color: white;
font: bold 0.85em Century Gothic;
padding: 0.6em;
background-color: #424E4F;
}
table.standard td {
padding: 0.2em 0.5em;
}
table.standard tr + tr > td {
border-top: 1px dotted #ccc;
}
table.standard th + th {
border-left: 1px solid white;
}
table.standard td + td {
border-left: 1px dotted #ccc;
}
table.standard > tfoot > tr > td {
border-top: 0.18em solid #424E4F;
padding: 0.2em 0.5em;
}
table.striped tr.alt td {
background-color: #eee;
}
table.hover tr:hover td {
background-color: #e0e0e0;
}
这是我的表格 HTML:
<table class="standard maxwidth striped hover">
<thead>
<tr>
<th class="left">Accessory</th>
<th class="center">Available</th>
<th class="right">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="label"><a href="/mss/Accessory/Edit/4">Mains Charger</a></td>
<td class="center">
<img src="/mss/Static/images/icons/tick.png" /></td>
<td class="right">
<a href="/mss/Accessory/Archive/4" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
/ <a href="/mss/Accessory/Delete/4" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
</td>
</tr>
<tr>
<td class="label"><a href="/mss/Accessory/Edit/3">Bluetooth Headset</a></td>
<td class="center">
<img src="/mss/Static/images/icons/tick.png" /></td>
<td class="right">
<a href="/mss/Accessory/Archive/3" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
/ <a href="/mss/Accessory/Delete/3" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
</td>
</tr>
<tr>
<td class="label"><a href="/mss/Accessory/Edit/2">Car Kit</a></td>
<td class="center">
<img src="/mss/Static/images/icons/tick.png" /></td>
<td class="right">
<a href="/mss/Accessory/Archive/2" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
/ <a href="/mss/Accessory/Delete/2" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
</td>
</tr>
<tr>
<td class="label"><a href="/mss/Accessory/Edit/1">Leather Phone Case</a></td>
<td class="center">
<img src="/mss/Static/images/icons/tick.png" /></td>
<td class="right">
<a href="/mss/Accessory/Archive/1" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a>
/ <a href="/mss/Accessory/Delete/1" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><a href="/mss/Accessory/New">Add an Accessory</a></td>
</tr>
</tfoot>
</table>
请注意,单元格内容之前和/或之后的间距似乎不会对问题产生积极或消极的影响。
编辑
将 CSS 更改为使用 px 单位而不是 em 可以修复左栏文本慢跑,但不能解决垂直图像居中问题。想法?
编辑 2
现在这里有一个在线问题的演示。