CSS浏览器兼容性问题创建边框
[英]CSS Browser compatibility issues creating borders
问题描述
HTML markup: 
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 markup: CSS标记：
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
But as the title says, I'm having cross Browser issues, the border that's supposed to cover the whole table gets cut off at the bottom. 但是正如标题所述，我遇到了跨浏览器的问题，应该覆盖整个表格的边框在底部被切断了。
Any recommendations for alternative ways to create the border? 关于建立边界的其他方式有什么建议吗？
Edited HTML taking everybody's worries into consideration. 编辑过的HTML考虑到了每个人的后顾之忧。 Border still draws improperly. 边框仍然绘制不正确。
See a demo here 在此处查看演示
5 个解决方案
解决方案1
2 已采纳 2012-08-05 23:44:24
It's caused by a combination of an invalid rowspan and border collapsing (which is the default when you select "Normalized CSS" in jsFiddle). 这是由于无效的行距和边框折叠（这是在jsFiddle中选择“ Normalized CSS”时的默认设置）共同导致的。 If you turn that off or provide the correct number of rows then the border draws correctly. 如果将其关闭或提供正确的行数，则边框将正确绘制。
解决方案2
1 2012-08-05 23:17:16
<td rowspan='5' width=10%> indicates that there are at least 4 following rows, since the current cell shall span 5 rows. <td rowspan='5' width=10%>表示后面至少有4行，因为当前单元格将跨越5行。 Since you don't provide any of those rows the <td> will spill out of the table. 由于您不提供任何这些行，因此<td>会从表中溢出。 Drop the rowspan attribute: 删除rowspan属性：
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
解决方案3
1 2012-08-05 23:17:59
You have a rowspan="5" on the first td which is breaking the bottom border of the table, probably because it cannot find the remaining 4 rows to merge with. 您在第一个td上有一个rowspan="5" ，它打破了表格的底部边界，可能是因为它找不到要合并的其余4行。 Removing the rowspan fixes the border. 卸下行跨度固定的边界。
解决方案4
1 2012-08-05 23:19:05
Try fixing the errors with html in your code, for starters. 对于初学者，请尝试使用代码中的html修复错误。 Your code lacks some quotation marks, and styling attributes in tags are deprecated. 您的代码缺少一些引号，并且不赞成使用标签中的样式属性。
<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>
解决方案5
0 2012-08-06 00:02:19
缺少引号和单位。您需要指定值是以像素还是ems ....尝试并使用颜色编码，例如#fff或rgb（255 255 255）而不是白色。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.