`
zhaixoahu
  • 浏览: 136150 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

让 IE < 7 支持 position:fixed 的通用方法

阅读更多

每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性,我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果,例如页边角的小角旗,或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题,尽管 IE7/8 已经能够正确处理这个属性,但 IE6 的份额还是很高,所以当我们用这个属性时,还得想办法解决这个问题。

今天在一位德国朋友的博客上,看到了一个不错的通用解决方案。这里我简单介绍,或者说翻译一下作者的方法:

在 Firefox/Opera 等良好支持 W3C 标准的浏览器中,如果我们希望将某个元素固定在页面底部,我们可以给它指派这样的 CSS:

position: fixed;
bottom: 0;

对于 IE7 来说,它虽然可以正确的将这个元素 fix 在底部,但它却错误的处理了水平方向的位置。对于这个问题,我们可以利用一个原有的 hack 来解决:

left: 50%;
margin-left: -390px;

这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了,他们不懂得 position: fixed 属性,所以我们需要单独解决一下:

首先我们为这些浏览器单独创建一个样式表,我们可以利用条件注释语句,让 IE<7 的浏览器单独载入这个“多于”的样式表:

<!–[if IE lt 7]>
<link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” />
<![endif]–>

然后我们在这个 CSS 文件中,对这个需要固定在页面底部的元素添加 CSS 属性:

postion: absolute;
bottom: auto;
top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);

这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。

这种方法原理上来说和以前的 Javascript 方案是相同的,但这种方法显然通用性更好一点。当然,如果您不介意用 Javascript 的话,实现同样的效果会更直观更简单一点。

 

分享到:
评论

相关推荐

    解决ie6的定位问题 position fiexed

    为了解决这个问题,我们需要一种兼容IE6的方法来模拟`position: fixed;`的效果。 #### 解决方案 为了克服IE6中的这一限制,可以采用以下策略: 1. **使用条件注释**:首先,利用HTML中的条件注释来为目标浏览器...

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

    然而,IE6并不支持`position:fixed`,这给开发者带来了困扰。为了解决这个问题,我们需要采取一些特定的技巧。 首先,我们可以看到代码中使用了条件注释`&lt;!--[if IE 6]&gt;`来针对IE6应用特殊的CSS规则。常规的`...

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

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

    IE6不兼容position:fixed属性的解决办法分享

    IE6 不支持 `position: fixed` 的主要原因是其渲染引擎的限制。IE6 使用的布局模型称为“Quirks Mode”,在这个模式下,许多现代 CSS 特性得不到正确支持。为了解决这个问题,我们可以利用 IE6 的特定条件注释...

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

    通过这样的CSS Hack,我们可以在不引入JavaScript的情况下,让IE6也能实现类似`position: fixed`的行为。当然,这种方法虽然实用,但也存在性能问题,因为`expression`会频繁重新计算,可能会导致页面渲染变慢。随着...

    HTML 纯CSS浮窗兼容IE6+

    此外,为了让浮窗在页面滚动时保持固定位置,我们可以使用CSS的`position: fixed;`,但这在IE6中不被支持。为了解决这个问题,我们可以创建一个JavaScript函数,当用户滚动页面时,动态调整浮窗的位置: ```...

    ie+FF通用的父子模态对话框相互传值

    - 在CSS中,可以通过设置`position: fixed`、`z-index`以及透明背景层来实现模态效果。 - 对于IE6,可能需要额外处理,如使用`filter: alpha(opacity=XX)`来模拟透明度。 总的来说,实现"ie+FF通用的父子模态...

    在网页中居中的若干种方法(至少6种,已经标明了对应浏览器,希望对你有用哦~)

    "火狐IE两种居中方法.html" 和 "火狐IE中居中.html" 可能包含了针对IE和Firefox的特定解决方案,而 "火狐IE都居中.html" 则可能展示了一种在两者都通用的方法。"相对居中(所有浏览器都居中).html" 提供了一个兼容...

    仿Facebook底部工具栏的实现

    "&gt;&lt;a href="http://www.faqee.com" target="_blank"&gt;发起网络&lt;/a&gt;:&lt;/li&gt; &lt;li class="shang"&gt;&lt;a href="#"&gt;免费接口&lt;/a&gt;&lt;span class="thespan"&gt; &lt;p&gt;&lt;a href=...

    JavaScript Table行定位效果

    定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed定位。 【克隆tr】 table有一个rows集合,包括了table的所有tr(包括thead和tfoot里面的)。 程序的Clone方法会根据其参数克隆对应索引的tr: this._...

    可移动的div层,简单通用

    7. **CSS样式**:为了使div能够被拖动,我们可能需要将其CSS定位设置为`position: absolute`或`position: fixed`,这样它就可以独立于其他元素并根据需要移动。 8. **浏览器兼容性**:虽然现代浏览器通常支持这些...

    div水平垂直居中的完美解决方案

    在IE6中,由于不支持`position: fixed`,我们需要将其改为`position: absolute`。这种方法可以实现元素在页面的中心位置居中,无论窗口大小如何变化。 此外,如果要同时实现水平和垂直居中,可以使用Flexbox布局。...

    JavaScript入门基础教程(1)js入门+和数据类型介绍.docx

    - **特点**: 例如,Firefox &gt; IE7 &gt; IE6 的书写顺序,确保不同版本浏览器下的正确显示。 #### 五、程序语言与标签语言的区别 - **标签语言**: 仅描述页面的结构和外观,如HTML。 - **程序语言**: 包含逻辑和变量...

    css入门笔记

    语法:&lt;ANY 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色英文名 2.背景颜色 属性:background 取值 :颜色 3.设置文字大小 属性:font-size 取 ...

    最全前端面试问题及答案总结

    - **兼容性**:`&lt;link&gt;`在所有现代浏览器中都能很好地工作,而`@import`在IE5以上版本才被支持。 - **权重**:`&lt;link&gt;`方式的CSS规则通常具有更高的权重。 #### position: absolute 与 position: fixed 的区别 - **...

    css 2.0 中文手册

    CSS 2.0在现代浏览器中得到了广泛支持,但在旧版浏览器(尤其是IE6及以下)中可能存在兼容性问题,因此开发时需注意使用前缀和备选方案以确保跨浏览器一致性。 通过深入理解CSS 2.0中文手册,开发者可以更好地控制...

    div与css的

    - **定位**: 包括相对定位(`position:relative`)、绝对定位(`position:absolute`)、固定定位(`position:fixed`)等,通过这些定位方式可以精确地控制元素的位置。 **2.2 常用CSS属性** - **布局相关的属性**: `...

    div+css图片垂直居中

    CSS中的定位机制是实现垂直居中的基础,主要包括`position`属性(如`relative`, `absolute`, `fixed`或`static`)以及`top`, `bottom`, `left`, `right`属性来调整元素的位置。 2. **非IE浏览器的解决方案**: - ...

Global site tag (gtag.js) - Google Analytics