2
我在td中有一個展開/摺疊div元素的表格。 在IE9中進行擴展時，一切正常，但在谷歌瀏覽器（版本16.0.912.75米）中，我在不同的位置出現意想不到的實線邊框。 似乎colspan = 3 tr與此有關，因爲固體邊界出現在上面和下面。此外，div寬度值似乎也會影響這一點：當爲這些值選擇其他值時，行爲會發生變化。在擴展表格行div時在Chrome中出現奇怪的邊框行爲
請參閱下面的html。我添加了4屏打印：初始視圖，展開row1，展開row2，展開兩者。 是什麼導致了這種奇怪的行爲，我該如何預防它？
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Example</title>
<style type="text/css">
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
div.QUAL {
margin-left:4pt;
font-size: 90%;
}
input.buttonQUAL {
color: blue;
background: white;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
div.listQUALdesc {
color: black;
background: white;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse functions based on id
function toggleMe(a){
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none")
{
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
};
function expandByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "block";
}
}
return true;
}
function collapseByIdStart(IdStart){
var divs = document.getElementsByTagName('div');
for (var i=0; i<divs.length; i++) {
if (divs[i].id.match("^"+IdStart) == IdStart) {
divs[i].style.display = "none";
}
}
return true;
}
</script>
</head>
<body>
<p/>
<table style='table-layout:fixed word-break:break-all'>
<col width="70"><col width="70"><col width="70">
<thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
<tbody>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row1'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row1"/>
</td>
<td>text1
<div id="row1" class="listQUALdesc" style="width:100; display:none">
text2
</div>
</td>
<td></td>
</tr>
<tr>
<td><div class="QUAL">xxx</div></td>
<td>text3</td>
<td></td>
</tr>
<tr>
<td colspan="3">Start</td>
</tr>
<tr>
<td>
<input
type="button"
class="buttonQUAL"
onclick="toggleMe('row2'); return true;"
onMouseOver="this.style.cursor='hand'"
value="row2"/>
<div id="row2" class="QUAL" style="display:none;width:65">
text5<br/>
</div>
</td>
<td>text4</td>
<td></td>
</tr>
<tr>
<td colspan="3">End</td>
</tr>
</tbody>
</table>
</body>
</html>
好的我能解決這個問題 - 添加<！doctype html>刪除了奇怪的行爲。但我仍然想知道究竟發生了什麼。 – Maestro13 2012-01-15 22:41:06
並且添加<！doctype html>不是一個完整的解決方案，因爲當我將它應用到我正在處理的更大的html上時，它引入了其他問題，其中包含div中的子表：它們的字體大小減少了（顯然）25％ - 爲什麼會發生？注意：如有必要，我會爲此創建另一個問題，添加屏幕打印。 – Maestro13 2012-01-15 22:50:15