各位大大，
小弟我想請教一個問題，就是，css要如何編寫，才能讓
網頁畫面看起來是二個正常的版面，舉個例子來說，就是當我使用
border-bottom的樣式時，ie顯示是正常的，而在火狐顯示會跑掉，而原先在ie瀏覽是正常的浮動float在火狐則是亂到不行，
即使是調好火狐瀏覽沒問題的，在ie上看又跑掉了
但是，小弟我試了幾家大的網站，像奇摩也好，(奇摩改用div控制頁面很久了)就不會有這種在二個不同的情形，畫面都是一致的，為什麼咧？！是怎麼做到的！可否請各位大大解答一下，小弟的困擾 ，感激不盡

由於難以判斷你所謂的「正常」是什麼意思，建議還是貼個範例網址上來比較好。（上面的紅字都是除了你之外別人不會了解的東西）

（有可能是 margin 等問題，還有 IE6 計算 border + width 的方式跟標準不太相同。）

_________________
雜工 :: 柏強 / Bob Chao
發問討論請保持禮節，在志工社群裡沒有人有「義務」要為您做些什麼。

* MozTW 志工無限招募中，開放網路世界需要您的一臂之力

BobChao大大
網址如下：
http://acits.network.com.tw/CityPass/index03-01.asp

http://spa33.network.com.tw/

小弟幫公司做的網頁，在火狐上看，就是很奇怪，我也知道ie很爛
，可是一直照爛東西的標準做，就是被ie害的很慘，在火狐上就跑版了，小弟很想調整過來，麻煩大大幫我解答了，謝謝，感激不盡

我是小小

嗯... 你的版面跑掉的部分似乎都跟 ul 有關
提醒你不同瀏覽器對 ul 的 margin 與 padding 預設值不見得相同，與版面相關時最好兩者都先歸零，例如

_________________
雜工 :: 柏強 / Bob Chao
發問討論請保持禮節，在志工社群裡沒有人有「義務」要為您做些什麼。

* MozTW 志工無限招募中，開放網路世界需要您的一臂之力

BobChao大，太客氣了

那我是小不隆咚

再請教一下
1.有哪些除了ul 外，還有哪些標籤及樣式的margin與padding不相同的預設值
2.該如何編寫
3.有沒有可參照的標準寫法，如網頁(html及css寫的很簡單易懂的)

不好意思，一次提了三個問題，
一直很想把這個搞懂，謝謝，希望我的問題不會造成大大的困擾

1. 很多，而且由於規範內對於這類東西比較不會定死，所以新的瀏覽器一出來都可以依據「他們覺得比較好」的方式來訂一些預設值。

2. 如前一篇說的，先歸零，特別是遇到 margin 跟 padding 都要注意類似的問題。我以「css default margin padding」找到了兩篇看起來不錯的東西，請參考：
http://tantek.com/log/2004/09.html#d06t2354
http://clagnut.com/blog/1287/

或者多做點預設值不影響的設計囉 如果要求版面需精準無比，是有比較難啦...

3. 如果你不排斥英文，其實我覺得 W3school 不錯啦，而且英文的資源說實在超級多，那技術英文其實都不是很難，我覺得生活會話比較難 orz

--
沒有客氣，我真的是小小 orz，叫 Bob、BobChao 或柏強都可以

_________________
雜工 :: 柏強 / Bob Chao
發問討論請保持禮節，在志工社群裡沒有人有「義務」要為您做些什麼。

* MozTW 志工無限招募中，開放網路世界需要您的一臂之力

BobChao
真的很感謝你，這二個網頁上的說明，就可以讓我好好的研究了，太棒了，如果有些製作上的心得，我也會不定期的po上來跟大家分享，BobChao幫我了一個大忙！讚哦

BobChao

我想再請教您，有關火狐在css的問題
http://japan.youaremaster.com/
這個網頁，在爛ie看是可以有背景圖的
但是在火狐上瀏覽有二個背景圖是不見的
而我的寫法是
#main{ clear:both; width:100%; margin:0; padding:0; background:url(images/jap_lefttop_bg.gif) no-repeat top left; position:relative; top:0 !important;top:0}

.jap_map{ width:580px; clear:both; margin:0.3em 0; padding:0;background:url(images/jap_map_bg.gif) no-repeat top left; text-align:right; }

這是有什麼樣的問題嗎？還是哪裡寫錯了，想請BobChao抽個空，幫小弟我看一下問題，一般是用!important去區分火狐判讀，用在邊距的設定很管用，那背景圖要怎麼用咧？我一直找了背景圖的文章，但都找不到，才想說要麻煩BobChao您，真是不好意思，若BobChao大沒空，可否告知小弟哪裡可以找到解惑之處，感恩

float 基本觀念一： float 的元素會跳脫原始的 position:relative 排版，形成只跟 inline 層級元素、有設 float 或 clear 的 block 層級元素互相影響的狀態，沒指定高度時，高度為零，所以父層級的元素是不會反應 float 的元素的高度的。

所以 #main 跟 .topmenu 裡面要動點小手腳才能讓背景圖從原本 height:0 的地方露出臉。

參考: CSS實務排版技巧、秘訣與技術

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

謝謝wini大
我再研究看看，謝謝你

果然是要設高度，試出來了，感恩wini大

真的是太感謝您了。我也常常因為float的問題而讓版面失去控制。大大提供的網站幫助很大！！
謝謝你！

順便問一下
有沒有辦法設定哪個核心的瀏覽器就套用不同的css語法嗎？
因為有些時需要用到此語法
麻煩大大提供
包含IE和火狐及至於其他的核心就套用IE吧
如果是其他的核心
然後顯示出較你換瀏覽器的訊息

你到網路上找 "CSS hack" 看看吧。

最簡單處理 IE6 跟 Fx 的，就是選擇符間的父子關係用 ">" 來表示，這樣看不懂 ">" 的 IE6 就會略過該規則。至於 Opera 跟 IE7 或 Safari 那些的可以暫時不管他們，因為他們對 CSS 的解釋也不同，但是不會差太誇張。


不過如果想要徹底點的話，大概要靠 JavaScript 來判斷瀏覽器送出的識別資料了，這點要請教別人。

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

IE 6 and below

IE 7 only

IE 7 and below

IE 7 and modern browsers only

Modern browsers only (not IE 7)

Recent Opera versions 9 and below


忘記那裡抄來的了

也可以參考我整理的。

_________________
時間，人為與自然的衝突。~不惑仔

我昨天為了讓自己寫的 pixnet 樣版可以在 IE 運作，剛好就在找這個資料
看了好久才知道，他的意思是說把 html 換成你想指定的東西

根據我測試的結果，* html{} 和 *+html{} 的用法其實 Firefox 也認得
不過我沒試過 *:first-child+html {} 就是了...

最後我只好改用不合標準的 CSS Hack，就是在特性名稱開頭加上底線和星號
例如 width 就會被寫成 _width 或 *width
前者可以被 IE6 及先前版本認得，後者可以被 IE7 及先前版本認得

_________________
在靜謐的國度裡，擁抱微風－－抱風伴靜