- 论坛徽章:
- 0
|
在ie中都正常的,在ff中,改变非常奇怪,一般是上下border可以改变颜色,但左右不显示,但如果在顶行,则左右可变,而且会自动显示到最底行.在最上行设置的顶框,也不正常,但如果在顶行第一列,则上框会延长到整行,底行正好相反.为简化,只取一个w3c中的边框冲突的例子加一点修改,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#tab { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
td { border: 1px dotted red; padding: 1em; }
td.cell5 { border: 5px solid blue; }
td.cell66 { border: 5px solid green; }
</style>
<script>
function test(id) {
document.getElementById(id).style.borderWidth="2px";
}
function test2(id) {
document.getElementById(id).style.borderStyle="double";
}
function test3(id) {
document.getElementById(id).style.borderColor="blue";
}
</script>
</head>
<body>
<form>
<input name="tid" id="tid" value="tab" />
<input type="button" onclick="test(document.getElementById('tid').value)" value="width"/>
<input type="button" onclick="test2(document.getElementById('tid').value)" value="style"/>
<input type="button" onclick="test3(document.getElementById('tid').value)" value="color"/>
<input type="reset" value="reset"/>
</form>
<TABLE id="tab">
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="row2">
<TD> 4
<TD id="c5" class="cell8"> 5
<TD class="cell6"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR id="row4">
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR id="row5">
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>
</body>
</html> |
|
免费注册
发表于 2009-05-14 09:02