来看看：跨扫瞄器的CSS流动定位

显示全部楼层 · 发表于 2015-1-16 00:14:25

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。
IE7、Firefox、Opera，都撑持CSS的{position:fixed}，以是很简单完成（《详解定位与定位使用》）
IE6不撑持该属性，可是在利用!DOCTYPE声明指定standards-compliant（尺度）形式能够经由过程CSShack完成
上述声明下IE5和IE5.5今朝没有发明经由过程地道CSS可以办理的计划，可是能够经由过程IE独有的expression在CSS中完成（挪动网页时流动元素会动），这和罕见浮动Logo告白使用Javascript完成道理是一样的，只不外能够间接写在CSS中对照烦琐的
使用IE独占的前提正文语句能够针对分歧的IE版本准确设置，同时制止了这些代码被其他扫瞄器读到，团体以为比地道的CSSHack好，假如你安装了多个IE（包含绿色版本），前提正文将会以最高版本的IE为尺度。
完成代码以下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
……
<styletype="text/css">
#fixed{position:fixed;top:5em;right:0;……}/*针对IE7、Opera、Firefox一行弄定*/
</style>
/*IE6中使用容器对溢出内容的处置体例来完成的*/
<!C[ifIE6]>
<styletype="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
/*fixed元素的相对地位是相对HTML元从来说，转动条是body元素的，这是设置right:17px的缘故原由*/
</style>
<![endif]C>
<!C[ifltIE6]>
<styletype="text/css">
#fixed{position:absolute;top:expression(eval(document.body.scrollTop+50));}
</style>
<![endif]C>
</head>
<body>
<divid="wrapper">
……
</div>
<divid="fixed"><h2>{position:fixed}</h2></div>
</body>
</html
代码演示1（单个IE，地道经由过程前提正文辨别IE扫瞄器）
代码演示2（多个IE，经由过程前提正文+CSShack辨别IE扫瞄器，分明的比地道前提正文庞大且不容易读，放下去次要是便于同个PC具有多个IE扫瞄器伴侣[一样平常应当做是web开辟的]能够间接看到效果，下同。）
也许有人像我一样，在!DOCTYPE声明是XHTML1.0Strict大概是XHTML1.1时，喜好在声明后面加上XMLProlog(如：<?xmlversion="1.0"encoding="utf-8"?>)，但此时IE7以下都处于quriks（兼容）形式，以是上述针对IE6的Hack生效，这个时分你能够对IE6也经由过程expression来完成。
当IE6处于quriks形式时，IE6和IE5.5对CSS剖析体例几近相同，以是当看到《position:fixedforInternetExplorer》时，我找到了在quriks形式下IE6/IE5.5/IE5一致的CSS办理计划：
<?xmlversion="1.0"encoding="utf-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh"lang="zh">
<head>
……
<!C[ifltIE7]>
<styletype="text/css">
body{overflow:hidden;}
#wrapper{height:100%;overflow:auto;}
#fixed{position:absolute;right:17px;}
</style>
<![endif]C>
</head>
<body>
<divid="wrapper">
……
</div>
<divid="fixed"><h2>{position:fixed}</h2></div>
</body>
</html>
代码演示3（单个IE，地道经由过程前提正文辨别IE扫瞄器）
代码演示4（多个IE，经由过程前提正文+CSShack辨别IE扫瞄器）
对照两个地道的CSShack发明，两个道理仿佛不异，在于html元素和body元素的使用和对CSS的{position:fixed}的撑持水平上，可是这实践上是一种Hack，基础上不具有通用性，晓得这个办法就能够了。必要提示的是IE6standards-compliant形式下HTML元素不论给它设置甚么样的高度和宽度，它的巨细都一直充斥全部扫瞄器的可视地区，而IE5和Quirks形式下html元素和body元素一切宽高设置城市被疏忽而坚持充斥扫瞄器的可视地区，更多内容请看《IE中的html元素》
也许有人会想，如今能够引进了XMLProlog又能用纯CSS办法办理了IE7以下的成绩，这下爽了，可是加上XMLProlog后俄然发明IE6处于Quriks形式，之前在standards-compliant形式下的计划又变形了，呵呵，这就是我们弄IE的了局

</p>
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

显示全部楼层 · 发表于 2015-1-18 05:44:50

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：跨扫瞄器的CSS流动定位

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子