看看这个例子:
并且“规格”下的红色表格并没有成为包含它的完整宽度 - 在 Firebug 上检查时,div 不是 220 像素,而是基于内容宽度的 100 像素以上。
<div class="grid_4 alpha">
<table width="100%" class="grid_4 alpha omega">
<tr class="specrow">
<td class="specname">type:</td>
<td class="specvalue">House</td>
</tr>
<tr class="specrow">
<td class="specname">year:</td>
<td class="specvalue">1986</td>
</tr>
</table>
</div>
CSS 代码如下所示:
#listing_specs table {
width: 100%;
}
#listing_specs table tbody {
display: table-row-group;
width: 100%;
}
.specrow {
margin:2px 0px;
border-bottom:1px dotted #dadada;
color: #fff;
width: 100%;
background-color: #A92229;
}
.specrow:hover {
background-color:#fff;
color:#333;
}
.specname{
font-weight: 600;
padding:2px 2px 2px 5px;
width: 50%;
white-space: nowrap;
}
.specvalue {
font-weight:normal;
padding:2px 5px 2px 5px;
text-align:left;
width: 50%;
}
我知道有一个通用的 CSS 重置器,我认为这就是导致问题的原因。不幸的是,我不能直接删除对它的引用,因为此时有多个站点从同一个位置引用它,而且我不能在不仔细审查的情况下进行更改。所以我需要一种在样式表本身上覆盖它的方法。被调用的重置 CSS 是:
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" />