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

[問題]有關IE與FireFox解析CSS的不同....
https://forum.moztw.org/viewtopic.php?f=13&t=11497		 第 1 頁 (共 2 頁)
發表人:  AndyJiang [ 2005-11-18, 15:25 ]
文章主題 :  [問題]有關IE與FireFox解析CSS的不同....
請問

以下的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>
發表人:  Amauds [ 2005-11-18, 16:42 ]
文章主題 : 
try this:

table { margin:0 auto; }
發表人:  AndyJiang [ 2005-11-19, 09:51 ]
文章主題 : 
謝謝Amauds大大

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

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


ps:近日看了本站推薦的「跨平台網頁設計」這本書，
在實作過程中發覺自己的「胃口」真被微軟養壞了 :lol:
發表人:  Amauds [ 2005-11-19, 12:55 ]
文章主題 : 
AndyJiang 寫:
但是也想請教，該問題是IE 還是FireFox的Bug ?


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

我通常不管是不是 bug，我在 blog 上作設定時，
是以慣用的 FX 為準，之後用最多人用的 IE 看有沒有分別，
儘量調到兩種 browser 都能看為原則。
發表人:  訪客 [ 2005-11-19, 16:17 ]
文章主題 : 
Amauds 寫:
AndyJiang 寫:
但是也想請教，該問題是IE 還是FireFox的Bug ?


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


ie 核心的 bug。
發表人:  wini [ 2005-11-19, 17:17 ]
文章主題 : 
Amauds 寫:
try this:

table { margin:0 auto; }

順便解說一下。

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

值為 0 和 auto 時不必加單位，也可使用帶小數的值，
單位可用值為 em px pt % cm..... 等等等的。
上下的距離不建議使用 % ，因為感覺有點難理解它到底是用啥作比較值。
發表人:  coolcd [ 2005-11-19, 17:57 ]
文章主題 : 
之前 DanielWang 在奇摩知識上面有推廣過...
李某人有詳細的解答，讓我受益匪淺
http://tw.knowledge.yahoo.com/question/ ... 5052503942

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

http://css-discuss.incutio.com/?page=Ce ... ockElement
發表人:  Amauds [ 2005-11-19, 20:35 ]
文章主題 : 
coolcd 寫:
但我記得 IE 不認得 {margin: 0 auto;}
這方法雖然標準但似乎不夠實用
也許用 absolute position 比較能通吃各種瀏覽器


我的 IE 認得 {margin: 0 auto;}，
另外一個 background-attachment:fixed 如果是作用在 body 的話，IE 也認得。
發表人:  coolcd [ 2005-11-20, 12:40 ]
文章主題 : 
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;} 就沒問題
發表人:  李某人 [ 2005-11-20, 18:07 ]
文章主題 : 
IE6 在 standard mode 裡面有支援到標準的置中方法...
至於在 quirk mode 或是較舊版本請使用在 parent element apply text-align: center; 的方式...

(當然, 後續功夫要做好, 而且同一層中有幾個 elements 的話也不能只令特定的 element 置中...
發表人:  AndyJiang [ 2005-11-25, 21:24 ]
文章主題 : 
首先感謝前輩們的解說，這一段時間以來都在學習將單位內的網頁改為以CSS定位的排版方式，
說真的，不能用<table>來排版還真不習慣哪!!! :(

另外請教hemiola兄：

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

也就是說，用FireFox開網頁，我已經在<body>層級CSS設定內容的element置中，為何不能將<table>置中，這有沒有可能反而是FireFox的bug呢?
發表人:  catho7 [ 2005-11-25, 23:51 ]
文章主題 : 
AndyJiang 寫:
如果是IE核心的bug，導致<body>中的text-align:center CSS設定，可以將<body>....</body>之間的所有element都置中，那這個「核心的bud」還蠻實用、蠻直覺的，不是嗎？

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

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

假若文字排列跟元素排列都用同一個CSS處理就會有不少問題
因為想把元素置中不代表想把元素內的文字置中...
發表人:  李某人 [ 2005-11-26, 01:14 ]
文章主題 : 
舉個很簡單的例子...

代碼:
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 絕對做不到這個...
高下立見...
發表人:  AndyJiang [ 2005-11-29, 10:00 ]
文章主題 : 
原來如此，受教了 :)
發表人:  Amauds [ 2005-11-29, 11:07 ]
文章主題 : 
IE old box model 不知道如何測試，李某人舉的例子在我自己的機器上 Firefox 及 IE 看起來都一樣。不過還是很高興能多學一點。
第 1 頁 (共 2 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/