-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%>現在のセルは5行にまたがる必要があるため、少なくとも4つの後続行があることを示します。これらの行を指定しないため<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

おそらく、マージする残りの4行が見つからないために、テーブルの下の境界線を壊しているrowspan="5"最初の行があります。td行スパンを削除すると、境界線が修正されます。

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 に答える