MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2024-05-17, 22:05

檢視沒有回覆的主題 | 檢視最近討論的主題


MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  第 1 頁 (共 1 頁)
  [ 2 篇文章 ] 
  列印模式 上一個主題 | 下一個主題 
發表人 內容
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;">&nbsp;</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;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px">&nbsp;</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;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px;">&nbsp;</td>
    <td style="width:642px; height:24px;" colspan="9" bgcolor="#898989">&nbsp;</td>
    <td style="width:1px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px;">&nbsp;</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">&nbsp;</td>
    <td style="width:1px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px;">&nbsp;</td>
    <td rowspan="3" style="width:150px; height:574px;">&nbsp;</td>
    <td style="width:1px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px;">&nbsp;</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;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px;">&nbsp;</td>
    <td style="width:1px;">&nbsp;</td>
  </tr>
  <tr>
    <td style="width:1px;">&nbsp;</td>
    <td style="width:1px; height:92px;" colspan="9" bgcolor="#CCCCCC">&nbsp;</td>
    <td style="width:92px; height:92px;" bgcolor="#CCCCCC">&nbsp;</td>
    <td style="width:1px;">&nbsp;</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;
}
回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.107 Safari/534.13
  
引用回覆  
Rscorpiox
文章發表於 : 2011-03-10, 00:45 
用多個Table替代td解決了這個問題~

不過還是挺好奇的~

不知道有沒有不用table替代的方法~ 0.0
回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.107 Safari/534.13
  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  第 1 頁 (共 1 頁)
  [ 2 篇文章 ] 

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員 和 3 位訪客

您 不能 在這個版面發表主題
您 不能 在這個版面回覆主題
您 不能 在這個版面編輯您的文章
您 不能 在這個版面刪除您的文章
您 不能 在這個版面上傳附加檔案

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW，Mozilla 台灣社群