Question

HTML 标记：

<table class='cardc'>
    <tr>
        <td rowspan='5' width='10%'>
            <img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
        </td>
        <td width='70%' colspan='3'>"
                ."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font>
        </td>
        <td>
            ".$record->fields->Email."
        </td>
    </tr>
    <tr>
        <td class='greyF' colspan='3'>
            ".$record->fields->Country_of_Citizenship__c."
        </td>
    </tr>
    <tr>
        <td>
            <div class='greyF'>year</div>".$record->fields->Fellowship_year__c."
        </td>
        <td>
            <div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c."
        </td>
        <td>
            <div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c."
        </td>
    </tr>
    <tr>
        <td colspan='3'>
                <div class='greyF'>Education</div>".$record->fields->Education__c."
        </td>
    </tr>
    <tr>
    </tr>
</table>

CSS 标记：

.cardc {
    border: 5px outset white;
    padding: 3px;
    width:80%;
}

但正如标题所说，我有跨浏览器问题，应该覆盖整个桌子的边界在底部被切断。

有关创建边框的其他方法的任何建议吗？

编辑HTML将每个人的担忧都考虑在内。边界仍然不正确查看演示here

Answer 1

这是由无效的rowpan和边框折叠的组合引起的（当你在jsFiddle中选择“Normalized CSS”时，这是默认设置）。如果将其关闭或提供正确的行数，则边框将正确绘制。

Answer 2

<td rowspan='5' width=10%>表示后续行至少有4行，因为当前单元格应跨越5行。由于您没有提供任何这些行，<td>将溢出表格。删除rowspan属性：

<td style="width:10%">
  <img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>

Answer 3

第一个rowspan="5"上有一个td，它打破了表格的底部边框，可能是因为它无法找到要合并的剩余4行。删除rowspan会修复边框。

http://jsfiddle.net/Q3e9m/

Answer 4

尝试使用代码中的html修复错误，对于初学者。您的代码缺少一些引号，标签中的样式属性已弃用。

<html>
<head>
    <style>
        .cardc {
            border: 5px outset white;
            padding: 3px;
            width:80%;
        }
    </style>
</head>
<body>
    <table class='cardc' style="height:100px;">
        <tr>
            <td style="width:10%">
                <img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/>
            </td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</body>

Answer 5

缺少引号和单位。您需要指定您的值是以像素还是以ems为单位....尝试使用颜色编码代码，例如#fff或rgb（255 255 255）而不是说白色。< / p>

CSS浏览器兼容性问题创建边框

5 个答案: