复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <title>CSS固定定位</title> <style type=”text/css”>
在网页设计中，有时我们需要创建一个始终位于页面特定位置（如右下角）的悬浮框，即使用户滚动页面，该悬浮框也会保持其位置。在本示例中，我们将探讨如何使用CSS实现一个兼容IE6的div悬浮框。让我们分析给定的代码。
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS固定定位</title>
<style type="text/css">
/* 基础样式 */
* { padding:0; margin:0; }
/* 悬浮框样式 */
#fixedLayer{
width:100px;
line-height:50px;
background: #FC6;
border:1px solid #F90;
position:fixed; /* 使用固定定位 */
right:10px;
bottom:10px;
}
/* IE6兼容性处理 */
<!--[if lte IE 6]>
<style type="text/css">
html { height:100%; overflow:hidden; }
body { height:100%; overflow:auto; }
#fixedLayer { position:absolute; } /* 改为绝对定位 */
</style>
<![endif]-->
</style>
</head>
<body>
<div id="fixedLayer">固定不动</div>
<!-- 多行文本内容 -->
</body>
</html>
```
1. **DOCTYPE声明**：这是一个XHTML 1.0 Transitional文档类型声明，它告诉浏览器按照XHTML 1.0规范解析HTML代码，同时允许使用一些过渡性的HTML元素和属性。
2. **字符编码**：`<meta>`标签用于设置页面的字符编码为GB2312，这适用于中文字符集。现代网站通常推荐使用UTF-8编码，以支持更多语言。
3. **CSS样式**：
- `* { padding:0; margin:0; }` 清除所有元素的默认内外边距，确保页面布局的一致性。
- `#fixedLayer` 是悬浮框的ID选择器，设置了宽度、高度、背景色、边框以及`position:fixed`。`fixed`定位使元素相对于浏览器窗口定位，而不是相对于父元素。
- `right:10px; bottom:10px;` 将悬浮框定位在浏览器窗口的右下角，距离边缘10像素。
4. **IE6兼容性处理**：
- IE6不支持`position:fixed`，因此需要使用条件注释`<!--[if lte IE 6]>`来针对IE6应用不同的CSS。
- `html { height:100%; overflow:hidden; }` 使得HTML元素的高度充满整个浏览器窗口，并隐藏溢出的内容，这是IE6中实现类似`position:fixed`效果的一种技巧。
- `body { height:100%; overflow:auto; }` 设置body的高度为100%，并允许内容滚动，这样当内容超出时，用户仍能查看。
- `#fixedLayer { position:absolute; }` 更改为`absolute`定位，因为IE6不支持`fixed`定位，但可以使用`absolute`实现类似效果。
5. **HTML结构**：在`<body>`标签内有一个`<div>`元素，其ID为`fixedLayer`，包含了“固定不动”的文本。下面是一系列`<p>`标签，用于模拟页面的多行内容。当用户滚动页面时，`#fixedLayer`应始终保持在屏幕的右下角。
通过这种方式，我们可以创建一个兼容IE6的CSS悬浮框。请注意，尽管IE6已经非常过时，但在某些特定场景下，仍然可能需要对这种老版本浏览器进行兼容处理。在现代网页开发中，我们通常会推荐使用更现代的浏览器和CSS特性，同时使用渐进增强或优雅降级策略来确保广泛兼容性。
