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瀏覽器兼容性問題，創建邊界

回答

相關問題