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

-1

<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

来源

2012-08-05 Stupid.Fat.Cat

什么是跨浏览器问题 – 2012-08-05 23:07:34

应该覆盖整个表的边界在底部被切断。 – 2012-08-05 23:09:12

如果你仍然在使用表格布局来设计你的页面风格，那么它不再是一个好主意，当CSS仍然缺乏时，这是一种老派的方式。语义现在非常重要，特别是针对SEO。 – Dan 2012-08-05 23:22:35

它是由一个无效的行跨度和边界崩溃（这是默认在您选择的jsfiddle“标准化CSS”）的组合引起的。如果您关闭或提供正确的行数，则边框绘制正确。

来源

2012-08-05 23:44:24 Neil

我尝试了一个示例，其中有5行随机垃圾字符串，仍然有一个破碎的边框。 – 2012-08-05 23:54:29

我试图关闭崩溃，它的工作。谢谢！ – 2012-08-06 00:08:27

<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-05 23:17:16 Zeta

rowspan很好，代码在IE中工作正常 – 2012-08-05 23:28:03

根据[HTML5]（http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#attr-tdth- rowspan）和[HTML4]（http://www.w3.org/TR/html4/struct/tables.html#adef-rowspan）。如果你的代码在除IE以外的每个浏览器中断，那么这是因为IE忽略了一个无效值。顺便说一句：如果你不想跨越所有的行，你可以使用'rowspan = 0'。 – Zeta 2012-08-05 23:32:03

rowspan = 0对我不起作用:( – 2012-08-05 23:34:58

您在其上破表的底部边框第一td有rowspan="5"，可能是因为它无法找到剩下的4行与合并。删除rowspan修复了边框。

http://jsfiddle.net/Q3e9m/

来源

2012-08-05 23:17:59 Dan

行跨度不是问题，你可以不断添加更多的td标签，它会堆叠起来。目前的代码在IE中工作正常，在chrome中只有一些问题 – 2012-08-05 23:27:38

试试用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-05 23:19:05 Harangue

引号不是问题 – 2012-08-05 23:28:31

注意我也修复了rowspan问题以及废弃的标签样式。原始代码只能由一个惊人的浏览器正确解释。 – Harangue 2012-08-05 23:30:50

rowspan是不是问题，我只是检查。 – 2012-08-05 23:31:47

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

来源

2012-08-06 00:02:19 Lawryenzo

尝试使用颜色代码，而不是这种情况。 – 2012-08-06 00:05:17

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

回答

相关问题