MozTW 討論區 :: 檢視主題 - 表格高度顯示不一

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>lol</title>
</head>

<style type="text/css" media="all">
@import url("./menu.css");
@import url("./style.css");
</style>

<script language="javascript1.2" type="text/javascript" src="./js/mm_css_menu.js"></script>
<script language="javascript" type="text/javascript" src="./js/img_player.js"></script>
<script language="javascript" type="text/javascript" src="./js/dreamweaver.js"></script>
<script language="javascript" type="text/javascript" src="./js/init.js"></script>
<script language="javascript" type="text/javascript" src="./js/buttonLink.js"></script>
<script language="javascript" type="text/javascript">
addLoadEvent(img_player);
addLoadEvent(MM_preloadImages('./Image/button-c_01.jpg','./Image/button-c_02.jpg','./Image/button-c_03.jpg','./Image/button-c_04.jpg','./Image/button-c_05.jpg','./Image/button-c_06.jpg','./Image/button-c_07.jpg'));
</script>

<body>
<table style="width:802px; height:1024px;" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" bordercolor="#FFFFFF">
<tr>
<td style="width:8px;"> </td>
<td style="width:800px; height:200px;" colspan="10"><img src="./Image/topic.png" name="topic" width="800" height="200" id="topic" alt="" /></td>
<td style="width:8px;"> </td>
</tr>
<tr>
<td style="width:1px"> </td>
<td style="width:158px; height:158px;" rowspan="3"><img src="./Image/time.png" width="158" height="158" alt="" /></td>
<td style="width:95px; height:41px;" ><img src="./Image/button_01.jpg" name="button1" width="95" height="41" id="button1" onMouseOver="MM_menuShowMenu('MMMenuContainerIndex', 'MMMenuIndex',0,0,'button1'); MM_swapImage('button1','','./Image/button-c_01.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(0)"alt="" /></td>
<td style="width:91px; height:41px;" ><img src="./Image/button_02.jpg" name="button2" width="91" height="41" id="button2" onMouseOver="MM_menuShowMenu('MMMenuContainerDocIntro', 'MMMenuDocIntro',0,0,'button2'); MM_swapImage('button2','','./Image/button-c_02.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(5)" alt="" /></td>
<td style="width:91px; height:41px;" ><img src="./Image/button_03.jpg" name="button3" width="91" height="41" id="button3" onMouseOver="MM_menuShowMenu('MMMenuContainerSpecial', 'MMMenuSpecial',0,0,'button3'); MM_swapImage('button3','','./Image/button-c_03.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(7)"alt="" /></td>
<td style="width:91px; height:41px;" ><img src="./Image/button_04.jpg" name="button4" width="91" height="41" id="button4" onMouseOver="MM_swapImage('button4','','./Image/button-c_04.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="chLink(16)" alt="" /></td>
<td style="width:90px; height:41px;" ><img src="./Image/button_05.jpg" name="button5" width="90" height="41" id="button5" onMouseOver="MM_menuShowMenu('MMMenuContainerDance', 'MMMenuDance',0,0,'button5'); MM_swapImage('button5','','./Image/button-c_05.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(13)" alt="" /></td>
<td style="width:91px; height:41px;" colspan="2"><img src="./Image/button_06.jpg" name="button6" width="91" height="41" id="button6" onMouseOver="MM_swapImage('button6','','./Image/button-c_06.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="chLink(17)" alt="" /></td>
<td style="width:93px; height:41px;" colspan="2"><img src="./Image/button_07.jpg" name="button7" width="93" height="41" id="button7" onMouseOver="MM_swapImage('button7','','./Image/button-c_07.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="chLink(18)" alt="" /></td>
<td style="width:1px;"> </td>
</tr>
<tr>
<td style="width:1px;"> </td>
<td style="width:642px; height:24px;" colspan="9" bgcolor="#898989"> </td>
<td style="width:1px;"> </td>
</tr>
<tr>
<td style="width:1px;"> </td>
<td colspan="6" rowspan="4" style= "background-image: url( './Image/LRCorner.png'); background-repeat:no-repeat; background-position:bottom;"><iframe id="mainContent" frameborder="0" width="100%" height="667" src="./index.php" allowTransparency="true"></iframe></td>
<td style="width:145px; height:267px;" colspan="3" rowspan="2"> </td>
<td style="width:1px;"> </td>
</tr>
<tr>
<td style="width:1px;"> </td>
<td rowspan="3" style="width:150px; height:574px;"> </td>
<td style="width:1px;"> </td>
</tr>
<tr>
<td style="width:1px;"> </td>
<td style="width:145px; height:400px;" colspan="3" rowspan="2">
<div id="fade_focus">
<div class="loading">Loading..<br/><img src="./Image/Pic/1.jpg" width="134" height="100" /></div>
<ul>
         <li><img src="./Image/Pic/1.jpg" width="134" height="100" alt="展示圖片1" /></li>
         <li><img src="./Image/Pic/2.jpg" width="134" height="100" alt="展示圖片2" /></li>
         <li><img src="./Image/Pic/3.jpg" width="134" height="100" alt="展示圖片3" /></li>
         <li><img src="./Image/Pic/4.jpg" width="134" height="100" alt="展示圖片4" /></li>
<li><img src="./Image/Pic/5.jpg" width="134" height="100" alt="展示圖片5" /></li>
<li><img src="./Image/Pic/6.jpg" width="134" height="100" alt="展示圖片6" /></li>
      </ul>
   </div> </td>
<td style="width:1px;"> </td>
</tr>
<tr>
<td style="width:1px;"> </td>
<td style="width:1px;"> </td>
</tr>
<tr>
<td style="width:1px;"> </td>
<td style="width:1px; height:92px;" colspan="9" bgcolor="#CCCCCC"> </td>
<td style="width:92px; height:92px;" bgcolor="#CCCCCC"> </td>
<td style="width:1px;"> </td>
</tr>
</table>
</body>
</html>

@charset "utf-8";

td img{display:block;}

/*td{vertical-align:top;}*/

table{font-size:12px;}
/*-----------------------------------------------------------------------------------------------*/

body {
background-color:transparent;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
color: #555555;
font-size: 13px;
background-image: url(./Image/bg.jpg);
}

a{
cursor:pointer;
}
/*a:定義在menu被覆蓋
a:link {
color: #333333;
text-decoration:underline;
}
a:visited {
text-decoration: underline;
color: #333333;
}
a:hover {
text-decoration:underline;
color:#FF3300;
}
a:active {
text-decoration: underline;
color: #333333;
}
*/
/*-------------------------------------------for img player↓-------------------------------------*/
.d1{
width:134px;
height:100px;
overflow:hidden;
border:#666666 0px solid;
background-color:#FFFFFF;
position:relative;
}

.d2{
width:100%;
height:209px;
overflow:hidden;
}

.loading{
width:134px;
height:100px;
border:#666666 2px solid;
background-color:#000000;
color:#FFCC00;
font-size:12px;
text-align:center;
padding-top:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}

.num_list{
position:absolute;
width:100%;
left:0px;
bottom:-1px;
background-color:#FFFFFF; /*字體下方Layout顏色*/
color:#333333; /*字體顏色*/
font-size:12px;
padding:4px 0px;
height:20px;
overflow:hidden;
}

.num_list span{
display:inline-block;
height:16px;
padding-left:6px;
}

img{
border:0px;
}

ul{
display:none;
}
/*
.button{
position:absolute;
z-index:1000;
right:0px;
bottom:2px;
font-size:13px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
*/
.b1,.b2{
background-color:#666666;
display:block;
float:left;
padding:2px 6px;
margin-right:3px;
color:#FFFFFF;
text-decoration:none;
cursor:pointer;
}

.b2{
color:#FFCC33;
background-color:#FF6633;
}

發表人:	Rscorpiox [ 2011-03-09, 20:45 ]
文章主題 :	表格高度顯示不一
想請問一下為什麼我 Table 裡面 td 的高度在chrome、ie下是照我設定的pixel顯示在firefox裡某些td的高度卻會被拉長不少呢? 試著把非html標準的<td width heigh> 以 <td style="width heigh"> 方式取代還是一樣不知道是我哪邊遺漏了? 查了一天多還是查不到解決辦法希望大家可以幫幫忙下方是網頁代碼，有點長，不好意思 0.0 代碼: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>lol</title> </head> <style type="text/css" media="all"> @import url("./menu.css"); @import url("./style.css"); </style> <script language="javascript1.2" type="text/javascript" src="./js/mm_css_menu.js"></script> <script language="javascript" type="text/javascript" src="./js/img_player.js"></script> <script language="javascript" type="text/javascript" src="./js/dreamweaver.js"></script> <script language="javascript" type="text/javascript" src="./js/init.js"></script> <script language="javascript" type="text/javascript" src="./js/buttonLink.js"></script> <script language="javascript" type="text/javascript"> addLoadEvent(img_player); addLoadEvent(MM_preloadImages('./Image/button-c_01.jpg','./Image/button-c_02.jpg','./Image/button-c_03.jpg','./Image/button-c_04.jpg','./Image/button-c_05.jpg','./Image/button-c_06.jpg','./Image/button-c_07.jpg')); </script> <body> <table style="width:802px; height:1024px;" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" bordercolor="#FFFFFF"> <tr> <td style="width:8px;"> </td> <td style="width:800px; height:200px;" colspan="10"><img src="./Image/topic.png" name="topic" width="800" height="200" id="topic" alt="" /></td> <td style="width:8px;"> </td> </tr> <tr> <td style="width:1px"> </td> <td style="width:158px; height:158px;" rowspan="3"><img src="./Image/time.png" width="158" height="158" alt="" /></td> <td style="width:95px; height:41px;" ><img src="./Image/button_01.jpg" name="button1" width="95" height="41" id="button1" onMouseOver="MM_menuShowMenu('MMMenuContainerIndex', 'MMMenuIndex',0,0,'button1'); MM_swapImage('button1','','./Image/button-c_01.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(0)"alt="" /></td> <td style="width:91px; height:41px;" ><img src="./Image/button_02.jpg" name="button2" width="91" height="41" id="button2" onMouseOver="MM_menuShowMenu('MMMenuContainerDocIntro', 'MMMenuDocIntro',0,0,'button2'); MM_swapImage('button2','','./Image/button-c_02.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(5)" alt="" /></td> <td style="width:91px; height:41px;" ><img src="./Image/button_03.jpg" name="button3" width="91" height="41" id="button3" onMouseOver="MM_menuShowMenu('MMMenuContainerSpecial', 'MMMenuSpecial',0,0,'button3'); MM_swapImage('button3','','./Image/button-c_03.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(7)"alt="" /></td> <td style="width:91px; height:41px;" ><img src="./Image/button_04.jpg" name="button4" width="91" height="41" id="button4" onMouseOver="MM_swapImage('button4','','./Image/button-c_04.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="chLink(16)" alt="" /></td> <td style="width:90px; height:41px;" ><img src="./Image/button_05.jpg" name="button5" width="90" height="41" id="button5" onMouseOver="MM_menuShowMenu('MMMenuContainerDance', 'MMMenuDance',0,0,'button5'); MM_swapImage('button5','','./Image/button-c_05.jpg',1)" onMouseOut="MM_swapImgRestore(); MM_menuStartTimeout(300);" onClick="chLink(13)" alt="" /></td> <td style="width:91px; height:41px;" colspan="2"><img src="./Image/button_06.jpg" name="button6" width="91" height="41" id="button6" onMouseOver="MM_swapImage('button6','','./Image/button-c_06.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="chLink(17)" alt="" /></td> <td style="width:93px; height:41px;" colspan="2"><img src="./Image/button_07.jpg" name="button7" width="93" height="41" id="button7" onMouseOver="MM_swapImage('button7','','./Image/button-c_07.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="chLink(18)" alt="" /></td> <td style="width:1px;"> </td> </tr> <tr> <td style="width:1px;"> </td> <td style="width:642px; height:24px;" colspan="9" bgcolor="#898989"> </td> <td style="width:1px;"> </td> </tr> <tr> <td style="width:1px;"> </td> <td colspan="6" rowspan="4" style= "background-image: url( './Image/LRCorner.png'); background-repeat:no-repeat; background-position:bottom;"><iframe id="mainContent" frameborder="0" width="100%" height="667" src="./index.php" allowTransparency="true"></iframe></td> <td style="width:145px; height:267px;" colspan="3" rowspan="2"> </td> <td style="width:1px;"> </td> </tr> <tr> <td style="width:1px;"> </td> <td rowspan="3" style="width:150px; height:574px;"> </td> <td style="width:1px;"> </td> </tr> <tr> <td style="width:1px;"> </td> <td style="width:145px; height:400px;" colspan="3" rowspan="2"> <div id="fade_focus"> <div class="loading">Loading..<br/><img src="./Image/Pic/1.jpg" width="134" height="100" /></div> <ul> <li><img src="./Image/Pic/1.jpg" width="134" height="100" alt="展示圖片1" /></li> <li><img src="./Image/Pic/2.jpg" width="134" height="100" alt="展示圖片2" /></li> <li><img src="./Image/Pic/3.jpg" width="134" height="100" alt="展示圖片3" /></li> <li><img src="./Image/Pic/4.jpg" width="134" height="100" alt="展示圖片4" /></li> <li><img src="./Image/Pic/5.jpg" width="134" height="100" alt="展示圖片5" /></li> <li><img src="./Image/Pic/6.jpg" width="134" height="100" alt="展示圖片6" /></li> </ul> </div> </td> <td style="width:1px;"> </td> </tr> <tr> <td style="width:1px;"> </td> <td style="width:1px;"> </td> </tr> <tr> <td style="width:1px;"> </td> <td style="width:1px; height:92px;" colspan="9" bgcolor="#CCCCCC"> </td> <td style="width:92px; height:92px;" bgcolor="#CCCCCC"> </td> <td style="width:1px;"> </td> </tr> </table> </body> </html> 這是 style.css 的內文代碼: @charset "utf-8"; td img{display:block;} /td{vertical-align:top;}/ table{font-size:12px;} /-----------------------------------------------------------------------------------------------/ body { background-color:transparent; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; color: #555555; font-size: 13px; background-image: url(./Image/bg.jpg); } a{ cursor:pointer; } /a:定義在menu被覆蓋 a:link { color: #333333; text-decoration:underline; } a:visited { text-decoration: underline; color: #333333; } a:hover { text-decoration:underline; color:#FF3300; } a:active { text-decoration: underline; color: #333333; } / /-------------------------------------------for img player↓-------------------------------------/ .d1{ width:134px; height:100px; overflow:hidden; border:#666666 0px solid; background-color:#FFFFFF; position:relative; } .d2{ width:100%; height:209px; overflow:hidden; } .loading{ width:134px; height:100px; border:#666666 2px solid; background-color:#000000; color:#FFCC00; font-size:12px; text-align:center; padding-top:30px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; } .num_list{ position:absolute; width:100%; left:0px; bottom:-1px; background-color:#FFFFFF; /字體下方Layout顏色/ color:#333333; /字體顏色/ font-size:12px; padding:4px 0px; height:20px; overflow:hidden; } .num_list span{ display:inline-block; height:16px; padding-left:6px; } img{ border:0px; } ul{ display:none; } /* .button{ position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; } */ .b1,.b2{ background-color:#666666; display:block; float:left; padding:2px 6px; margin-right:3px; color:#FFFFFF; text-decoration:none; cursor:pointer; } .b2{ color:#FFCC33; background-color:#FF6633; }

發表人:	Rscorpiox [ 2011-03-10, 00:45 ]
文章主題 :	Re: 表格高度顯示不一
用多個Table替代td解決了這個問題~ 不過還是挺好奇的~ 不知道有沒有不用table替代的方法~ 0.0

MozTW 討論區 https://forum.moztw.org/

表格高度顯示不一 https://forum.moztw.org/viewtopic.php?f=13&t=31908	第 1 頁 (共 1 頁)

第 1 頁 (共 1 頁)	所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/