语言

这是一份翻译。与英文版本相比，它可能包含错误或者过时。翻译员: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秒

语言

关于翻译