-1

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。边框仍然绘制不正确。在此处
查看演示

4

5 回答 5

2

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

于 2012-08-05T23:44:24.830 回答
1

<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>
于 2012-08-05T23:17:16.760 回答
1

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

http://jsfiddle.net/Q3e9m/

于 2012-08-05T23:17:59.320 回答
1

对于初学者，请尝试在代码中使用 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>

于 2012-08-05T23:19:05.497 回答
0

缺少引号和单位。您需要指定您的值是像素还是 ems ....尝试使用颜色编码代码，例如 #fff 或 rgb(255 255 255) 而不是白色。

于 2012-08-06T00:02:19.103 回答