語言

這是一份翻譯。與英文版本相比，它可能包含錯誤或者過時。翻譯員:Samuel Chong of Chinese Translation Services through its pro bono translation services

網頁樣式表CSS 提示與竅門

請見 索引 去查看所有提示.

在這一頁:

一個固定住的功能表

您在這網頁右邊看到的功能表只是一個UL清單但當你滾動頁面時它仍保持固定。（您可能需要先將視窗縮小才能獲得捲軸。） 使它固定在其位置的套裝程式含在樣式表的規則/程式之中。以下是直接從本網頁的來源程式中提取的編碼： 

<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

在一個沒有CSS功能或CSS功能被關掉的流覽器中，這只是一個含有連結的普通段落. 但有CSS，感謝以下的規則/程式， 它看起來將是被釘在流覽器視窗的右上角，"漂浮"在網頁之上： 

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

這裡有趣的規則或程式是： 'position: fixed',使DIV在螢幕上固定。 'top:50%' 和 'right: 0' 確認DIV在哪裡顯示， 在這種情況： 從視窗頂部向下50％，從右邊開始一個常量0px。 其他屬性，邊距，邊框， 顏色等，可根據個人喜好添加。

還有"left"和"bottom"屬性，將元素錨定在螢幕的左側或底部。

更多細節

更確切地說: 一旦元素被固定為'position: fixed， 三個屬性"left"，"width"和"right"會一起確定相對于視窗的水準位置和大小。(CSS使用更通用的詞 viewport; 窗口是視口的示例。)

你最多需要三個屬性中的兩個，即左和寬度，右和寬度，或左和對。只設置三個中的一個，或者根本不設置都是可行的。 在這種情況下，CSS將根據需要使用元素的自然（"內在"）大小和/或位置，以保留其預設值（'auto'）的任何屬性。

這同樣適用於三重奏"top"，"height"和"bottom"。你最多需要設置兩個: 如果要控制從視窗頂部的距離就使用'top'，"bottom"來控制距離底部和'height'如果你想指定一個固定的高度的話。

如果你看看嵌入在這個頁面的實際樣式表， 您將看到一些看起來彼此矛盾的附加規則。這些都是為了防止bug在一些舊的流覽器。 請見下麵.

常見問題: 在Windows上的 IE 5 & 6 ？

如果你用微軟IE5 或6的流覽器閱讀此頁("WinIE5" 和 "WinIE6") ， 你會注意到它不好用。很多人就此向我詢問，所以我想借此提供一點解釋。簡單的說：錯誤是在流覽器，而不在網頁本身。

很不幸WinIE5 和 WinIE6還不能識別 'fixed'，而更大的問題是它們不能正確解析 'position' 這一屬性。 一個不識別 'fixed' 屬性的流覽器本應忽略 'position: fixed' 這一規則/程式，回到樣式表中之前所定義的 'position' 值。然後我們可以在 'fixed' 之前加入 'position: absolute'，流覽器便會使用'position: absolute'。但在WinIE 5 和 6 中並非如此。 很明顯，不知怎麼關鍵字'fixed' 被解釋成 'static'.

你無法讓WinIE5 和 WinIE6支持 'fixed', 但有一個針對解析問題的變通辦法。Johannes Koch提醒了我這一秘訣(從他的 collection of work-arounds [page at archive.org]). 首先以 'position: absolute' 取代樣式規則中的 'position: fixed'， 然後在樣式規則中靠後一點的位置加入以下規則： 

*>#intro {position: fixed}

這樣做的效果是能識別CSS '>' (child) 部分的流覽器將使用這一規則，但那些不能識別的流覽器，特別是WinIE5 和 WinIE6, 將忽略它。'position: absolute' 規則將被使用，並且功能表將在正確的位置，只是在你滾動滑鼠時 它無法保持固定。

在 '>' 前後沒有空格是很重要的 。.

Bert Bos,style activity lead
Copyright ©1994–2022 W3C®Privacy policy

創建於2001年1月17日;
最後更新2022年02月10日 星期四 05:40:52

語言

關於翻譯