CSS 浏览器兼容性问题创建边框答案

【问题标题】：CSS Browser compatibility issues creating bordersCSS 浏览器兼容性问题创建边框
【发布时间】：2012-08-06 08:28:29
【问题描述】：

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

【问题讨论】：

什么是跨浏览器问题
本应覆盖整个表格的边框在底部被切断。
如果您仍在使用表格布局来设置页面样式，那么这不再是一个好主意，在尚缺乏 CSS 的情况下，这是一种老式的方式。语义现在非常重要，特别是对于 SEO。
您能指导我找到更好的方法吗？一段时间以来一直在努力寻找更好的方法。

标签： html css internet-explorer google-chrome

【解决方案1】：

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

【讨论】：

我尝试了一个示例，其中有 5 行随机垃圾字符串，但边框仍然有一半破损。

【解决方案2】：

<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>

【讨论】：

根据HTML5 和HTML4 它不是。如果您的代码在除 IE 之外的所有浏览器中都出现问题，那是因为 IE 忽略了无效值。顺便说一句：如果你不想跨越所有行，你可以使用rowspan=0。

【解决方案3】：

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

http://jsfiddle.net/Q3e9m/

【讨论】：

行跨度不是问题，您可以继续添加更多的 td 标签，它只会将它们堆叠起来。当前代码在 IE 中运行良好，只是在 chrome 中存在一些问题

【解决方案4】：

尝试在您的代码中使用 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>

【讨论】：

请注意，我还修复了行跨度问题以及已弃用的标签样式。原始代码只能被出色的浏览器正确解释。
rowspan 不是问题，我刚刚检查过。
您在哪些浏览器中遇到问题？这会很有帮助。
我的代码在最新版本的 Chrome 中运行良好。 i45.tinypic.com/sg4bq8.png

【解决方案5】：

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

【讨论】：