`

css hack 解决ie6 position:fixed不支持问题

CSS浏览器XHTMLHTMLhack 
阅读更多
最近的一个项目要求做一个侧边栏，固定于窗口的左右侧，但是遇到ie6就熄火了，下面给出一种解决方案（ie6 expression hack）：

主要思路是ie6以上浏览器用position：fixed，此外添加ie6hack，为渲染元素给出_position：absolute，最关键的部分，采用_top:expression(eval(document.documentElement.scrollTop + 30)); 带起fixed中的投top：30px;

此种表达式还有：
document.body.clientWidth 
screen.availWidth
……

但此处为解决dom隐藏问题，在ie6下不支持，我采用了js隐藏，如果谁有更好的方法，拿出来大家一起交流一下

以下给出一个实例： 
<!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=utf-8" />
<title>ie6 fixed</title>

<style>
html,body{background-image:url(about:blank);background-attachment:fixed;}
.right{
	position:fixed;
	right:-50px;
	top:100px;
	_position:absolute;
	_right:-50px;
	_top:
	expression(eval(document.documentElement.scrollTop+100));
}

</style>
</head>

<body>
	<div class="right" style="height:100px; width:100px; border:1px solid red;"></div>
	<!--<div class="top style="height:30px; width:200px; background:#963;">ss</div>-->
    
    <p>1</p>
    <p>1</p><p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    
</body>
</html>
  • 大小: 3.7 KB
0
顶
1
踩
分享到：
| 货郎担问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    IE6下的纯CSS完美position:fixed实现

    在互联网早期，Internet Explorer 6 (IE6) 是一个广泛使用的浏览器，但它的CSS支持并不完善，特别是对于`position: fixed`属性。`position: fixed`在现代浏览器中用于创建固定定位元素，使得元素相对于视口...

    HTML IE6 纯CSS 解决 position fixed 的问题

    为了解决IE6中的`position: fixed;`问题，我们可以采用以下几种方法： 1. **条件注释法**： 在HTML文档的头部，可以使用IE6特有的条件注释来引入一个专门为IE6定制的CSS文件，这样可以针对IE6浏览器提供特别的样式...

    position:fixed在ie6的使用

    然而，在Internet Explorer 6（简称IE6）这个古老且具有很多兼容性问题的浏览器中，`position:fixed`的实现并不完美，需要采用特定的“hack”技巧来实现类似的效果。 首先，我们来详细理解`position:fixed`的正常...

    css中position:fixed实现div居中上下左右居中

    需要注意的是，由于旧版本的Internet Explorer（如IE6）不支持CSS3的一些新属性，可能会需要一些额外的hack来确保兼容性。在这个例子中，使用了`_position: absolute;`作为对IE6的兼容处理。 此技术非常适用于创建...

    CSS表达式(expression)解决IE6 position:fixed无效问题

    `position:fixed`在其他浏览器中可以让元素保持在视口的固定位置，不论用户如何滚动页面，但IE6并不支持这一属性。在处理这种兼容性问题时，开发者通常需要寻找替代方案。本文将详细讲解如何使用CSS表达式...

    position_fixed

    然而，IE6不支持`position: fixed;`，所以我们需要使用一些 hack 或者 JavaScript 解决方案。一种常见的方法是使用条件注释（Conditional Comments）配合JavaScript库如jQuery或Modernizr来检测浏览器版本，然后为IE...

    仿Lightbox效果（Windows关机效果），div覆盖，锁定页面及IE 6实现position:fixed;

    由于IE6不完全支持CSS的`position: fixed`，开发者通常需要使用JavaScript库如jQuery或特定的CSS hack来模拟固定定位的效果，以确保在旧版浏览器中也能正常显示。 在这个压缩包中包含的"lightbox测试.html"文件可能...

    ie6 position:fixed解决方案

    总结来说，解决IE6不支持`position: fixed;`的问题通常需要结合使用CSS Hack和JavaScript表达式。虽然这些方法在现代浏览器中已经不再适用，但对于维护旧网站或支持仍然使用IE6的用户来说，这些知识仍然是有价值的。...

    跨浏览器的实践:position:fixed 层的固定定位

    这个例子中的技巧在于，通过媒体查询和 IE 特有的 CSS 规则，让在支持 `position: fixed` 的浏览器中正常工作，同时在不支持的浏览器中采用备选方案，确保了在大多数浏览器中都有良好的用户体验。 总的来说，`...

    IE6不支持fixed解决方法

    在网页开发过程中，由于历史遗留原因，Internet Explorer 6（简称IE6）存在许多与现代浏览器不兼容的问题，其中之一就是不支持CSS中的`fixed`定位。`fixed`定位是一种常用的布局方式，可以让元素相对于浏览器窗口...

    IE6 position:fixed bug (固定窗口方法)

    标题中的“IE6 position:fixed bug (固定窗口方法)”指的是在Internet Explorer 6浏览器中，使用CSS的`position:fixed`属性时出现的一个兼容性问题。`position:fixed`通常用于创建固定定位的元素，使其在页面滚动时...

    js完美解决IE6不支持position:fixed的bug

    总的来说，解决IE6不支持`position:fixed`的bug需要开发者具备深厚的前端知识，包括CSS兼容性、CSS Hack以及对JavaScript表达式的理解。同时，也需要权衡性能与兼容性的关系，适时地做出技术决策，以适应不断变化的...

    解决IE6下Position:fixed问题

    总结来说，解决IE6的`position: fixed`问题涉及到对浏览器特性的深入理解以及巧妙地运用CSS hack和JavaScript。尽管这可能让代码变得复杂，但在某些情况下，为了保证广泛的用户覆盖，这样的优化工作是必要的。随着...

    解决iframe中fixed失效的问题

    在提供的压缩包文件 "iframe中fixed失效问题" 中，可能包含了具体的代码示例或演示页面，你可以直接打开查看这些案例，以更好地理解和应用上述解决方案。实际操作时，需要根据具体项目需求和限制选择合适的方法，...

    IE6浏览器不支持固定定位（position：fixed）解决方案

    IE6浏览器对CSS中的固定定位（position: fixed）不支持，这是一个众所周知的问题。IE6以及其他一些旧版本的浏览器，比如IE7和IE8，在文档处于怪异模式（quirk mode）时，会将position: fixed视为错误值，并将其忽略...

    IE6下fixed实现头部定位

    但在IE6中，由于不支持`fixed`定位，我们需要寻找替代方案。一种常见的解决方法是利用JavaScript或者特定的CSS hack。 资源中包含的`163css`文件可能包含了针对IE6的`fixed`定位修复代码，可能是通过引入名为`...

    IE6中的position:fixed定位兼容性写法分享

    ` 结合使用，可以解决IE6中背景图片闪烁的问题，使背景固定在视口不随页面滚动。 接下来是针对不同方向固定的兼容性写法： 1. **头部固定**： ```css /* IE6 头部固定 */ html .fixed-top { position: absolute; ...

    JS 滚动事件[removed]与position：fixed写兼容IE6的回到顶部组件

    对于IE6的兼容性问题，由于它不支持`position: fixed`，我们需要使用一些技巧。 ```css #top_div{ position:fixed; bottom:0px; right:0px; display:none; /*兼容IE6的position:fixed*/ _position: absolute; ...

    解决IE6、IE7、Firefox兼容比较简单的CSS Hack

    然而，IE6并不支持此属性，而IE7的支持也存在一些问题。为了解决这个问题，我们可以采用特定的CSS Hack技术。 首先，让我们解析一下提供的CSS代码： ```css #someNode { position: fixed; #position: fixed; /* ...

Magicbox
Global site tag (gtag.js) - Google Analytics