| MozTW 討論區 https://forum.moztw.org/ |
|
| 有關於css的編輯問題 https://forum.moztw.org/viewtopic.php?f=13&t=17880 |
第 1 頁 (共 2 頁) |
| 發表人: | tzjphxrumb [ 2007-03-07, 19:43 ] |
| 文章主題 : | 有關於css的編輯問題 |
各位大大， 小弟我想請教一個問題，就是，css要如何編寫，才能讓 網頁畫面看起來是二個正常的版面，舉個例子來說，就是當我使用 border-bottom的樣式時，ie顯示是正常的，而在火狐顯示會跑掉，而原先在ie瀏覽是正常的浮動float在火狐則是亂到不行， 即使是調好火狐瀏覽沒問題的，在ie上看又跑掉了 但是，小弟我試了幾家大的網站，像奇摩也好，(奇摩改用div控制頁面很久了)就不會有這種在二個不同的情形，畫面都是一致的，為什麼咧？！是怎麼做到的！可否請各位大大解答一下，小弟的困擾  ，感激不盡
|
|
| 發表人: | BobChao [ 2007-03-07, 20:15 ] |
| 文章主題 : | |
tzjphxrumb 寫: 各位大大，
小弟我想請教一個問題，就是，css要如何編寫，才能讓 網頁畫面看起來是二個正常的版面，舉個例子來說，就是當我使用 border-bottom的樣式時，ie顯示是正常的，而在火狐顯示會跑掉，而原先在ie瀏覽是正常的浮動float在火狐則是亂到不行， 即使是調好火狐瀏覽沒問題的，在ie上看又跑掉了 但是，小弟我試了幾家大的網站，像奇摩也好，(奇摩改用div控制頁面很久了)就不會有這種在二個不同的情形，畫面都是一致的，為什麼咧？！是怎麼做到的！可否請各位大大解答一下，小弟的困擾 ，感激不盡由於難以判斷你所謂的「正常」是什麼意思，建議還是貼個範例網址上來比較好。（上面的紅字都是除了你之外別人不會了解的東西） （有可能是 margin 等問題，還有 IE6 計算 border + width 的方式跟標準不太相同。） |
|
| 發表人: | tzjphxrumb [ 2007-03-08, 18:57 ] |
| 文章主題 : | |
BobChao 寫: 由於難以判斷你所謂的「正常」是什麼意思，建議還是貼個範例網址上來比較好。（上面的紅字都是除了你之外別人不會了解的東西） （有可能是 margin 等問題，還有 IE6 計算 border + width 的方式跟標準不太相同。） BobChao大大 網址如下： http://acits.network.com.tw/CityPass/index03-01.asp http://spa33.network.com.tw/ 小弟幫公司做的網頁，在火狐上看，就是很奇怪，我也知道ie很爛 ，可是一直照爛東西的標準做，就是被ie害的很慘，在火狐上就跑版了，小弟很想調整過來，麻煩大大幫我解答了，謝謝，感激不盡 |
|
| 發表人: | BobChao [ 2007-03-08, 19:01 ] |
| 文章主題 : | |
我是小小 嗯... 你的版面跑掉的部分似乎都跟 ul 有關 提醒你不同瀏覽器對 ul 的 margin 與 padding 預設值不見得相同，與版面相關時最好兩者都先歸零，例如 代碼: ul{
margin:0; padding: 0; /* 接著設定你想調整的值，例如 margin-bottom: 15px; */ } |
|
| 發表人: | tzjphxrumb [ 2007-03-08, 19:27 ] |
| 文章主題 : | |
BobChao 寫: 我是小小
嗯... 你的版面跑掉的部分似乎都跟 ul 有關 提醒你不同瀏覽器對 ul 的 margin 與 padding 預設值不見得相同，與版面相關時最好兩者都先歸零，例如 BobChao大，太客氣了 那我是小不隆咚 再請教一下 1.有哪些除了ul 外，還有哪些標籤及樣式的margin與padding不相同的預設值 2.該如何編寫 3.有沒有可參照的標準寫法，如網頁(html及css寫的很簡單易懂的) 不好意思，一次提了三個問題， 一直很想把這個搞懂，謝謝，希望我的問題不會造成大大的困擾 |
|
| 發表人: | BobChao [ 2007-03-08, 19:44 ] |
| 文章主題 : | |
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 或柏強都可以 |
|
| 發表人: | tzjphxrumb [ 2007-03-08, 20:22 ] |
| 文章主題 : | |
BobChao 寫:
BobChao 真的很感謝你，這二個網頁上的說明，就可以讓我好好的研究了，太棒了，如果有些製作上的心得，我也會不定期的po上來跟大家分享，BobChao幫我了一個大忙！讚哦 
|
|
| 發表人: | tzjphxrumb [ 2007-06-11, 14:47 ] |
| 文章主題 : | 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大沒空，可否告知小弟哪裡可以找到解惑之處，感恩 |
|
| 發表人: | wini [ 2007-06-11, 15:14 ] |
| 文章主題 : | |
tzjphxrumb 寫:
float 基本觀念一： float 的元素會跳脫原始的 position:relative 排版，形成只跟 inline 層級元素、有設 float 或 clear 的 block 層級元素互相影響的狀態，沒指定高度時，高度為零，所以父層級的元素是不會反應 float 的元素的高度的。 所以 #main 跟 .topmenu 裡面要動點小手腳才能讓背景圖從原本 height:0 的地方露出臉。 參考: CSS實務排版技巧、秘訣與技術 |
|
| 發表人: | tzjphxrumb [ 2007-06-11, 16:44 ] |
| 文章主題 : | |
wini 寫: tzjphxrumb 寫: float 基本觀念一： float 的元素會跳脫原始的 position:relative 排版，形成只跟 inline 層級元素、有設 float 或 clear 的 block 層級元素互相影響的狀態，沒指定高度時，高度為零，所以父層級的元素是不會反應 float 的元素的高度的。 所以 #main 跟 .topmenu 裡面要動點小手腳才能讓背景圖從原本 height:0 的地方露出臉。 參考: CSS實務排版技巧、秘訣與技術 謝謝wini大 我再研究看看，謝謝你 果然是要設高度，試出來了，感恩wini大 |
|
| 發表人: | aaalger618 [ 2007-06-30, 15:47 ] |
| 文章主題 : | |
wini 寫: tzjphxrumb 寫: BobChao float 基本觀念一： float 的元素會跳脫原始的 position:relative 排版，形成只跟 inline 層級元素、有設 float 或 clear 的 block 層級元素互相影響的狀態，沒指定高度時，高度為零，所以父層級的元素是不會反應 float 的元素的高度的。 所以 #main 跟 .topmenu 裡面要動點小手腳才能讓背景圖從原本 height:0 的地方露出臉。 參考: CSS實務排版技巧、秘訣與技術 真的是太感謝您了。我也常常因為float的問題而讓版面失去控制。大大提供的網站幫助很大！！ 謝謝你！ |
|
| 發表人: | lkk6015 [ 2007-07-01, 06:40 ] |
| 文章主題 : | |
順便問一下 有沒有辦法設定哪個核心的瀏覽器就套用不同的css語法嗎？ 因為有些時需要用到此語法 麻煩大大提供 包含IE和火狐及至於其他的核心就套用IE吧 如果是其他的核心 然後顯示出較你換瀏覽器的訊息 |
|
| 發表人: | wini [ 2007-07-01, 08:48 ] |
| 文章主題 : | |
lkk6015 寫: 順便問一下
有沒有辦法設定哪個核心的瀏覽器就套用不同的css語法嗎？ 因為有些時需要用到此語法 麻煩大大提供 包含IE和火狐及至於其他的核心就套用IE吧 如果是其他的核心 然後顯示出較你換瀏覽器的訊息 你到網路上找 "CSS hack" 看看吧。 最簡單處理 IE6 跟 Fx 的，就是選擇符間的父子關係用 ">" 來表示，這樣看不懂 ">" 的 IE6 就會略過該規則。至於 Opera 跟 IE7 或 Safari 那些的可以暫時不管他們，因為他們對 CSS 的解釋也不同，但是不會差太誇張。 代碼: selector1 > selector { property:value } /*給Fx看的*/
selector1 selector { property:value } /*給IE6看的*/ 不過如果想要徹底點的話，大概要靠 JavaScript 來判斷瀏覽器送出的識別資料了，這點要請教別人。 |
|
| 發表人: | 不惑仔Boohover [ 2007-07-01, 10:38 ] |
| 文章主題 : | CSS hacks - 在不同瀏覽器中實現CSS |
IE 6 and below 代碼: * html selector{} IE 7 only 代碼: *:first-child+html selector{} IE 7 and below 代碼: *:first-child+html selector{} * html selector{} IE 7 and modern browsers only 代碼: html>body selector{} Modern browsers only (not IE 7) 代碼: html>/**/body selector{} Recent Opera versions 9 and below 代碼: html:first-child selector{}
忘記那裡抄來的了 
也可以參考我整理的。 |
|
| 發表人: | 風痕影 [ 2007-07-04, 10:19 ] |
| 文章主題 : | |
不惑仔Boohover 寫: IE 6 and below
代碼: * html {} IE 7 and below 代碼: *:first-child+html {} * html {} IE 7 only 代碼: *:first-child+html {} 我昨天為了讓自己寫的 pixnet 樣版可以在 IE 運作，剛好就在找這個資料 看了好久才知道，他的意思是說把 html 換成你想指定的東西 根據我測試的結果，* html{} 和 *+html{} 的用法其實 Firefox 也認得 不過我沒試過 *:first-child+html {} 就是了... 最後我只好改用不合標準的 CSS Hack，就是在特性名稱開頭加上底線和星號 例如 width 就會被寫成 _width 或 *width 前者可以被 IE6 及先前版本認得，後者可以被 IE7 及先前版本認得 |
|
| 第 1 頁 (共 2 頁) | 所有顯示的時間為 UTC + 8 小時 |
| Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |
|