每个 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: fixed;`的效果。 #### 解决方案 为了克服IE6中的这一限制,可以采用以下策略: 1. **使用条件注释**:首先,利用HTML中的条件注释来为目标浏览器...
然而,IE6并不支持`position:fixed`,这给开发者带来了困扰。为了解决这个问题,我们需要采取一些特定的技巧。 首先,我们可以看到代码中使用了条件注释`<!--[if IE 6]>`来针对IE6应用特殊的CSS规则。常规的`...
`position:fixed`在其他浏览器中可以让元素保持在视口的固定位置,不论用户如何滚动页面,但IE6并不支持这一属性。在处理这种兼容性问题时,开发者通常需要寻找替代方案。本文将详细讲解如何使用CSS表达式...
IE6 不支持 `position: fixed` 的主要原因是其渲染引擎的限制。IE6 使用的布局模型称为“Quirks Mode”,在这个模式下,许多现代 CSS 特性得不到正确支持。为了解决这个问题,我们可以利用 IE6 的特定条件注释...
通过这样的CSS Hack,我们可以在不引入JavaScript的情况下,让IE6也能实现类似`position: fixed`的行为。当然,这种方法虽然实用,但也存在性能问题,因为`expression`会频繁重新计算,可能会导致页面渲染变慢。随着...
此外,为了让浮窗在页面滚动时保持固定位置,我们可以使用CSS的`position: fixed;`,但这在IE6中不被支持。为了解决这个问题,我们可以创建一个JavaScript函数,当用户滚动页面时,动态调整浮窗的位置: ```...
- 在CSS中,可以通过设置`position: fixed`、`z-index`以及透明背景层来实现模态效果。 - 对于IE6,可能需要额外处理,如使用`filter: alpha(opacity=XX)`来模拟透明度。 总的来说,实现"ie+FF通用的父子模态...
"火狐IE两种居中方法.html" 和 "火狐IE中居中.html" 可能包含了针对IE和Firefox的特定解决方案,而 "火狐IE都居中.html" 则可能展示了一种在两者都通用的方法。"相对居中(所有浏览器都居中).html" 提供了一个兼容...
"><a href="http://www.faqee.com" target="_blank">发起网络</a>:</li> <li class="shang"><a href="#">免费接口</a><span class="thespan"> <p><a href=...
定位方面,除了不支持fixed的ie6用absolute,其他都使用fixed定位。 【克隆tr】 table有一个rows集合,包括了table的所有tr(包括thead和tfoot里面的)。 程序的Clone方法会根据其参数克隆对应索引的tr: this._...
7. **CSS样式**:为了使div能够被拖动,我们可能需要将其CSS定位设置为`position: absolute`或`position: fixed`,这样它就可以独立于其他元素并根据需要移动。 8. **浏览器兼容性**:虽然现代浏览器通常支持这些...
在IE6中,由于不支持`position: fixed`,我们需要将其改为`position: absolute`。这种方法可以实现元素在页面的中心位置居中,无论窗口大小如何变化。 此外,如果要同时实现水平和垂直居中,可以使用Flexbox布局。...
- **特点**: 例如,Firefox > IE7 > IE6 的书写顺序,确保不同版本浏览器下的正确显示。 #### 五、程序语言与标签语言的区别 - **标签语言**: 仅描述页面的结构和外观,如HTML。 - **程序语言**: 包含逻辑和变量...
语法:<ANY 样式声明:用样式属性和值组成(属性:值;) 常用的样式属性: 1.颜色 属性 :color 颜色 取值:颜色英文名 2.背景颜色 属性:background 取值 :颜色 3.设置文字大小 属性:font-size 取 ...
- **兼容性**:`<link>`在所有现代浏览器中都能很好地工作,而`@import`在IE5以上版本才被支持。 - **权重**:`<link>`方式的CSS规则通常具有更高的权重。 #### position: absolute 与 position: fixed 的区别 - **...
CSS 2.0在现代浏览器中得到了广泛支持,但在旧版浏览器(尤其是IE6及以下)中可能存在兼容性问题,因此开发时需注意使用前缀和备选方案以确保跨浏览器一致性。 通过深入理解CSS 2.0中文手册,开发者可以更好地控制...
- **定位**: 包括相对定位(`position:relative`)、绝对定位(`position:absolute`)、固定定位(`position:fixed`)等,通过这些定位方式可以精确地控制元素的位置。 **2.2 常用CSS属性** - **布局相关的属性**: `...
CSS中的定位机制是实现垂直居中的基础,主要包括`position`属性(如`relative`, `absolute`, `fixed`或`static`)以及`top`, `bottom`, `left`, `right`属性来调整元素的位置。 2. **非IE浏览器的解决方案**: - ...