浏览器视窗内纯CSS的层固定位置及发现的一个针对IE6的怪癖问题
固定定位来源：http://www.wowbox.com.tw/blog/uploads/200705/02_022326_3.htm
详细HTML如下：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Position @随网之舞</title>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#242424;color:#ccc;}
h1{text-align:center;line-height:200%;}
code{display:block;margin:0.5em;border:1px solid #282828;padding:1em;background:#222;color:#888;font:1em Fixedsys;}
code span{color:#666;font-family:Verdana;}
ul{margin:1em;}
#fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}
</style>
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]--></head><body>
<div id="wrapper">
<h1>Fixed Position</h1>
<pre><code>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<span>......</span>
<!--[if lt IE 7]>
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<span>......</span>
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
</code></pre>
<ul>
<li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li><li>随网之舞</li>
</ul>
</div>
<div id="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
关键代码在于：
/* 这是针对标准浏览器的写法 */
#fixed{position:fixed;top:5em;right:0;background:#fff;color:#000;}
</style>
<!--[if lt IE 7] >
/* 这是版本小于ie7的兼容代码 */
<style type="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]-->后来，在应用这个东东的时候，关键代码检查了N遍都是对的，但是IE6中死活不出正确的效果，继而最后由同事（对css是外行）发现原因出在xml版本的声明上面。。。郁闷了半天
<?xml version="1.0" encoding="utf-8"?>
这个东西在ie6中不写的话，完全没有效果，再次鄙视IE。
记录之以便后忘。
浏览器视窗内纯CSS的层固定位置及发现的一个针对IE6的怪癖问题相关推荐
- html表格横向竖向滚动,利用纯css实现table固定列与表头中间横向滚动的思路和实例...
前言 最近在做的后台管理系统要处理大量的表格,因为原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工 ...
- 纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
- 兼容所有浏览器的省略号--纯CSS策略
代码: <style> div a{ display:block; /* 必须 */ Width:310px; /* 必须 */ white-space:nowrap; /* 必须 ...
- css如何设置固定位置,用css固定位置的方法
支付宝内搜索 9155838 即可领现金红包 每天都能领哦 在某些时候需要将一个div固定在一个浏览器某个指定的位置: 例如在使用loading状态条的时候,或者显示在线用户数的时候.需要层显示在 网 ...
- [css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放 一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
- css实现人走路效果,纯css实现机器人走路动画
纯css实现机器人走路动画 由于发现了css的这个现象 当一个有元素嵌套的时候,父元素有动画,子元素也有动画,那么子元素的运动会相对父元素的运动而运动 所以我忽然想到,实现人的走路动画并不是不可能的了 ...
- 在HTML中 表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
- html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析 因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
- 纯css 3D画廊旋转js特效
下载地址 一个创造性的.自动旋转画廊,纯CSS代码实现的相册,通过图像旋转一个3d空间.旋转动画核心代码.rotator { position: absolute; left: 0; right: 0 ...
最新文章
- SAP PM 入门系列16 - KO88对维护工单做结算
- 高项的项目管理ITTO（PMP第五版）
- “约见”面试官系列之常见面试题第十七篇之实现深拷贝（建议收藏）
- 给创业者的30条建议
- python 获取当前时间再往前几个月_Python 中的时间和日期操作
- java自动识别验证码_Java使用OCR技术识别验证码实现自动化登陆方法
- WebStorm中Node.js项目配置教程（1）——创建项目
- 【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例-转...
- “格力手机”的蝴蝶效应
- PowerBI Report Server借助Wap与ADFS实现集成一
- 计算机论文的研究思路与方法,硕士论文中研究方法怎么写 介绍3种简单的方法...
- discuz怎么自定义php,Discuz添加自定义数据调用模块
- 【POJ 1187】 陨石的秘密（dp）
- Matlab表格和时间表中的分组计算
- 在Blender中做一个小独角兽
- java关联宠物商店项目_Java实现宠物商店管理
- 山地自行车零件选择及使用误区
- simp服务器协议,Redis协议(RESP)规范
- php 项目操作日志文件,什么是操作日志？关于操作日志实例用法汇总
- 飞控Pixhawk——APM代码学习——ardupilot/ArduCopter文件夹