【免费】兼容ie6浏览器窗口四角固定背景代码分享资源-CSDN下载

需积分: 0 20 浏览量更新于2020-09-25 收藏 29KB PDF 举报

标题中的“兼容ie6浏览器窗口四角固定背景代码分享”是指一种HTML和CSS技术，用于在Internet Explorer 6（简称IE6）浏览器中实现页面窗口的四角具有固定的背景图片或颜色。这个问题在现代浏览器中通常很容易解决，但由于IE6的浏览器特性限制，需要特殊处理。描述中的“如何在html页面四角放置图片”与标题相呼应，说明了问题的核心是将图片固定在页面的四个角落。在给定的代码片段中，我们可以看到以下几个关键点： 1. 使用`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`声明文档类型，这是为了确保浏览器按照XHTML 1.0标准解析页面，有助于提高跨浏览器的兼容性。 2. `<style type="text/css">`内包含了CSS样式，其中的`html`和`body`选择器用于设置页面的基本布局。在IE6中，`html`元素需要隐藏滚动条（`_overflow:hidden;`），而`body`元素需要100%的高度（`_height:100%;`）和自动滚动（`_overflow:auto;`），以确保内容完全显示。 3. `.mainbox`选择器定义了一个带有固定边距、高度和背景色的主容器。这个容器可以是页面主要内容的外框，它的相对定位（`position:relative;`）是为了与其他绝对定位的元素配合使用。 4. `.topleft`, `.topright`, `.bottomleft`, `.bottomright`是四个类名，分别代表页面的左上、右上、左下和右下四个角落。它们都是绝对定位（在非IE6浏览器中为`position:fixed;`，在IE6中为`_position:absolute;`），并且具有相同的宽度和高度，以及背景颜色。这些类用于放置四角的背景图片或颜色。 5. 四个角落的定位通过`left`, `right`, `top`, 和 `bottom`属性实现。例如，`.topleft`位于左上角，其`left:0;`和`top:0;`属性确保它贴合页面的左侧和顶部。 6. IE6特有的`_z-index:-1;`属性用于将角落元素置于背景之下，使得主要内容可以覆盖它们，从而达到四角固定背景的效果。这段代码的目的是在不支持`position:fixed;`的IE6浏览器中模拟固定背景效果。在其他现代浏览器中，`position:fixed;`可以直接实现元素固定在视口的四个角落，但在IE6中需要使用绝对定位和一些特殊的私有属性（如`_position`和`_z-index`）来达到类似效果。由于IE6的市场份额已经极低，现在大多数开发者不再关注对它的兼容性，但这段代码对于理解旧浏览器的兼容性问题仍然有一定价值。