MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-08-06, 07:25

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





發表新文章 回覆主題  [ 16 篇文章 ]  前往頁數 12  下一頁
發表人 內容
文章發表於 : 2005-11-18, 15:25 
離線

註冊時間: 2005-11-11, 23:20
文章: 9
請問

以下的HTML + CSS的網頁,用FireFox開啟並無法讓<table>..</table>置中;但是用IE開啟,則<span>及<table>皆可置中,所以想請問有無其他用CSS的解決方法?或者是IE or FireFox解析CSS的問題?謝謝

PS : 若不用CSS,用<div align="center">雖然可以將<table>置中,但這樣不就違反用CSS控制版面的原則嗎?

代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>新網頁1</title>
<style>
   div {
      text-align:center;
   }
   table {
      border: 1px solid black;
   }

</style>
</head>

<body>
<div>
<span>TestTestTest</span>
<table>
   <tr>
      <td>TestTestTest</td>
   </tr>
</table>
</div>
</body>

</html>


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-18, 16:42 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
try this:

table { margin:0 auto; }

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-19, 09:51 
離線

註冊時間: 2005-11-11, 23:20
文章: 9
謝謝Amauds大大

您的方法可以解決<table>在FireFox呈現置中的問題

但是也想請教,該問題是IE 還是FireFox的Bug ?


ps:近日看了本站推薦的「跨平台網頁設計」這本書,
在實作過程中發覺自己的「胃口」真被微軟養壞了 :lol:


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-19, 12:55 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
AndyJiang 寫:
但是也想請教,該問題是IE 還是FireFox的Bug ?


這得要看看 CSS 的文件,再來研究。
我沒辦法說明是那個瀏覽器的 bug。

我通常不管是不是 bug,我在 blog 上作設定時,
是以慣用的 FX 為準,之後用最多人用的 IE 看有沒有分別,
儘量調到兩種 browser 都能看為原則。

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-19, 16:17 
Amauds 寫:
AndyJiang 寫:
但是也想請教,該問題是IE 還是FireFox的Bug ?


這得要看看 CSS 的文件,再來研究。
我沒辦法說明是那個瀏覽器的 bug。


ie 核心的 bug。


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051107 Firefox/1.5
  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-19, 17:17 
離線
[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220
Amauds 寫:
try this:

table { margin:0 auto; }

順便解說一下。

margin 或 padding 後方的值的表示意思:
一、 (數字+單位) --- 表示四個方向的。
二、 (數字+單位) (數字+單位) --- 表示上下、左右。
三、 (數字+單位) (數字+單位) (數字+單位) (數字+單位) --- 依序表示上右下左。

值為 0 和 auto 時不必加單位,也可使用帶小數的值,
單位可用值為 em px pt % cm..... 等等等的。
上下的距離不建議使用 % ,因為感覺有點難理解它到底是用啥作比較值。

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
(本帳號停用中)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8) Gecko/20051111 Firefox/1.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-19, 17:57 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
之前 DanielWang 在奇摩知識上面有推廣過...
李某人有詳細的解答,讓我受益匪淺
http://tw.knowledge.yahoo.com/question/ ... 5052503942

但我記得 IE 不認得 {margin: 0 auto;}
這方法雖然標準但似乎不夠實用
也許用 absolute position 比較能通吃各種瀏覽器

http://css-discuss.incutio.com/?page=Ce ... ockElement

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI


回頂端
Mozilla/5.0 (Windows; U; Win 9x 4.90; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7 (ax)
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-19, 20:35 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
coolcd 寫:
但我記得 IE 不認得 {margin: 0 auto;}
這方法雖然標準但似乎不夠實用
也許用 absolute position 比較能通吃各種瀏覽器


我的 IE 認得 {margin: 0 auto;},
另外一個 background-attachment:fixed 如果是作用在 body 的話,IE 也認得。

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-20, 12:40 
離線

註冊時間: 2003-11-18, 10:59
文章: 3473
Amauds 寫:
coolcd 寫:
但我記得 IE 不認得 {margin: 0 auto;}
這方法雖然標準但似乎不夠實用
也許用 absolute position 比較能通吃各種瀏覽器


我的 IE 認得 {margin: 0 auto;},
另外一個 background-attachment:fixed 如果是作用在 body 的話,IE 也認得。


我下面講的東西,在上面附的那個 css-discuss 的鏈結裡都有提到...
簡單提一下好了

IE6 以後才認得 {margin: 0 auto;}
對於較舊的 IE5 需要用一些手段...

IE5 中 {text-align: center;} 會把 top-level 的 div 放到中間
但是這也會讓文字置中
為了不讓文字置中
必須用一個 block element 把主要內容包起來,設定 {text-align: left;}

另外,mac/IE 不認得 {margin: 0 auto;} 這種簡寫
但是用 {margin-left: auto;margin-right: auto;} 就沒問題

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7 (ax)
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-20, 18:07 
離線

註冊時間: 2005-01-16, 13:34
文章: 131
IE6 在 standard mode 裡面有支援到標準的置中方法...
至於在 quirk mode 或是較舊版本請使用在 parent element apply text-align: center; 的方式...

(當然, 後續功夫要做好, 而且同一層中有幾個 elements 的話也不能只令特定的 element 置中...

_________________
Notes redesigned.
--
Opera 9.5 just tastes good. ;-)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-25, 21:24 
離線

註冊時間: 2005-11-11, 23:20
文章: 9
首先感謝前輩們的解說,這一段時間以來都在學習將單位內的網頁改為以CSS定位的排版方式,
說真的,不能用<table>來排版還真不習慣哪!!! :(

另外請教hemiola兄:

如果是IE核心的bug,導致<body>中的text-align:center CSS設定,可以將<body>....</body>之間的所有element都置中,那這個「核心的bud」還蠻實用、蠻直覺的,不是嗎?

也就是說,用FireFox開網頁,我已經在<body>層級CSS設定內容的element置中,為何不能將<table>置中,這有沒有可能反而是FireFox的bug呢?


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-25, 23:51 
離線

註冊時間: 2004-08-01, 23:05
文章: 246
AndyJiang 寫:
如果是IE核心的bug,導致<body>中的text-align:center CSS設定,可以將<body>....</body>之間的所有element都置中,那這個「核心的bud」還蠻實用、蠻直覺的,不是嗎?

也就是說,用FireFox開網頁,我已經在<body>層級CSS設定內容的element置中,為何不能將<table>置中,這有沒有可能反而是FireFox的bug呢?

正如coolcd所說,text-align的作用是設定文字的排列方式

假若文字排列跟元素排列都用同一個CSS處理就會有不少問題
因為想把元素置中不代表想把元素內的文字置中...

_________________
Journey of Blue
貓BLOG 我的Firefox
美味書籤


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-26, 01:14 
離線

註冊時間: 2005-01-16, 13:34
文章: 131
舉個很簡單的例子...

代碼:
HTML
<div id="wrap">
   <div id="e1"></div>
   <div id="e2"></div>
   <div id="e3"></div>
</div>

CSS
#wrap div {
   background: gray;
   width: 50px;
   height: 50px;
}
#e1 {
   margin: 0 auto 0 0;
}
#e2 {
   margin: 0 auto;
}
#e3 {
   margin: 0 0 0 auto;
}

IE old box model 絕對做不到這個...
高下立見...

_________________
Notes redesigned.
--
Opera 9.5 just tastes good. ;-)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-29, 10:00 
離線

註冊時間: 2005-11-11, 23:20
文章: 9
原來如此,受教了 :)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-TW; rv:1.7.12) Gecko/20050919 Firefox/1.0.7
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2005-11-29, 11:07 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
IE old box model 不知道如何測試,李某人舉的例子在我自己的機器上 Firefox 及 IE 看起來都一樣。不過還是很高興能多學一點。

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  [ 16 篇文章 ]  前往頁數 12  下一頁

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


誰在線上

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


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

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