IE 6与位置:固定
-
21-08-2019 - |
题
位置:修复了对Internet Explorer 6不起作用的修复。我真的不理解Google上找到的修复程序。我需要它在IE6,IE7,IE8和Firefox 3.0中工作。
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<title>Sidebar fixed</title>
<style type="text/css">
#wrapper {
position:relative;
width:900px;
margin:0 auto 0 auto;
}
#sidebar_left {
position:fixed;
height:200px;
width:200px;
border:1px solid #000;
}
#sidebar_right {
position:fixed;
height:200px;
width:200px;
margin-left:700px;
border:1px solid #000;
}
#content {
position:absolute;
height:2000px;
width:480px;
margin-left:210px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar_left">
<p>Left sidebar</p>
</div>
<div id="sidebar_right">
<p>Right sidebar</p>
</div>
<div id="content">
<p>This is the content</p>
</div>
</div>
</body>
</html>
解决方案
不支持IE6!人们越早停止对IE6进行黑客入侵,它的牵引力越小,它将越快死亡!或者,在您的第一个样式块之后添加此代码;
<!--[if IE 6]>
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->
结果不是超级平滑的,但确实有效。
更新
我不太清楚如何使用它;只需将具有“位置:固定”的任何元素的ID(或类)添加到上述块开始时的声明列表中,它们将在IE6中表现出来。
其他提示
是的,IE6很烂。这是黑客...
_position: absolute;
_top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
这基本上告诉IE6即使它滚动,也将其绝对放在左上角。这应该在您的CSS剩余部分下进行该元素,因此它将其超过IE6。
这是为您的左栏...
#leftBar {
position:fixed;
top:0;
left:0;
width:200px;
_position:absolute;
_top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
我刚刚在Ietester的IE6版本上对此进行了测试,它效果很好,而且...没有抖动,哇!
假设您有一个带有一类盒子的元素...
.box {
position: fixed;
top: 0px;
left: 0px;
}
更换开口 <HTML>
带有条件的IE语句标签...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
和
<!--[if !IE]--> <html> <!--[endif]-->
然后喜欢 马太赛 & Mitchbryson 建议使用“表达式”来模拟固定位置。
注意:此代码遵循CSS中的原始元素样式。
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
问题是在任何页面上滚动元素都会抖动,这是补偿的一种方法...
注意:此代码位于您的CSS或您在CSS中样式的“ html {}”之后。
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
根据 托马斯·艾洛特(Thomas Aylott) @ Scielgradient.com,
“……这迫使页面重新编写页面之前的CSS处理。由于它在重新绘制之前再次处理CSS,因此它将继续处理您的CSS表达式,然后再重新绘制。这使您可以完美平滑的位置固定元素!” “
文章链接: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html
例如,一起...
<!--[if IE 6]> <html id="ie6"> <![endif]-->
<!--[if !IE]--> <html> <!--[endif]-->
<HEAD>
<STYLE>
#ie6 {
background-image:url(about:blank);
background-attachment:fixed;
}
.box {
position: fixed;
top: 0px;
left: 0px;
}
#ie6 .box {
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</STYLE>
</HEAD>
<BODY>
<div class="box"></div>
</BODY>
</HTML>
找到了我对此进行调整的解决方案(基本上我更改的行是:$('#sidebar_left')。css('top',document.documentelement.scrolltop);):):
// Editing Instructions
// 1. Change '#your_div_id' to whatever the ID attribute of your DIV is
// 2. Change '175' to whatever the height of your header is, if you have no header, set to 0
/********************************
* (C) 2009 - Thiago Barbedo *
* - tbarbedo@gmail.com *
*********************************/
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 299 || self.pageYOffset > 299 && document.documentElement.scrollBottom > 100) {
$('#sidebar_left').css('top',document.documentElement.scrollTop);
$('#sidebar_right').css('top',document.documentElement.scrollTop);
} else if (document.documentElement.scrollTop < 299 || self.pageYOffset < 299) {
$('#sidebar_left').css('top','299px');
$('#sidebar_right').css('top','299px');
}
}
}
它令人讨厌,看起来很糟糕,但是在包括IE6在内的所有浏览器上都可以使用。
我最近写了一个jQuery插件来获得位置:固定在IE 6+中工作。它 不 滚动时的抖动,它查看功能(不是用户代理),在Internet Explorer 6、7、8中工作。
如果您在IE7+位置中使用严格的模式:固定将受到尊重,但默认情况下,IE7+在怪异模式下运行。该插件检查是否有浏览器功能,如果不尊重位置:修复了,则可以实现jQuery修复程序。
http://code.google.com/p/fixedposition/
这样的事情可能对您有用:
$(document).ready(function(){
$("#chatForm").fixedPosition({
debug: true,
fixedTo: "bottom"
});
});
您可能需要进行一些次要的CSS调整才能使其适用于您的代码。我正在研究“偏移”值作为我们所说的选项。
可以使用CSS表达式进行操作,但是有了一些额外的攻击以获得光滑的滚动:
html, body {
_height: 100%;
_overflow: hidden
}
body {
_overflow-y: auto
}
#fixedElement {
position: fixed;
_position: absolute; / ie6 /
top: 0;
right: 0
}