首页 > 教程 > 关键词  > 正文

网页设计技巧:跨浏览器的CSS固定定位

2007-04-29 13:43 · 稿源:蓝色理想

跨浏览器的CSS固定定位{position:fixed}

不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉。当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{position:fixed}来实现的,通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。

IE7、Firefox、Opera,都支持CSS的{position:fixed},所以很容易实现。IE6不支持该属性,但是在使用!DOCTYPE 声明指定standards-compliant(标准)模式可以通过CSS hack实现 。

上述声明下IE5和IE5.5目前没有发现通过纯粹CSS能够解决的方案,但是可以通过IE特有的expression在CSS中实现(移动网页时固定元素会动),这和常见浮动Logo广告利用Javascript实现原理是一样的,只不过可以直接写在CSS中比较简便的 。

利用IE独有的条件注释语句可以针对不同的IE版本精确设置,同时避免了这些代码被其他浏览器读到,个人认为比纯粹的CSS Hack好,如果你安装了多个IE(包括绿色版本),条件注释将会以最高版本的IE为标准。

实现代码如下:

以下为引用的内容:

"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

……

/*IE6中利用容器对溢出内容的处理方式来实现的*/

……

{position:fixed}

代码演示1(单个IE,纯粹通过条件注释区分IE浏览器)

代码演示2(多个IE,通过条件注释+CSS hack区分IE浏览器,明显的比纯粹条件注释复杂且不易读,放上来主要是便于同个PC拥有多个IE浏览器朋友[一般应该做是web开发的]可以直接看到效果,下同。)

或许有人像我一样,在!DOCTYPE 声明是XHTML1.0 Strict或者是XHTML1.1时,喜欢在声明前面加上XML Prolog(如:),但此时IE7以下都处于quriks(兼容)模式,所以上述针对IE6的Hack失效,这个时候你可以对IE6也通过expression来实现。

当IE6处于quriks模式时,IE6和IE5.5对CSS解析方式几乎雷同,所以当看到《position:fixed for Internet Explorer》时,我找到了在quriks模式下IE6/IE5.5/IE5统一的CSS解决方案:

以下为引用的内容:

"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

……

……

{position:fixed}

代码演示3(单个IE,纯粹通过条件注释区分IE浏览器)

代码演示4(多个IE,通过条件注释+CSS hack区分IE浏览器)

对比两个纯粹的CSS hack发现,两个原理似乎相同,在于html元素和body元素的应用和对CSS的{position:fixed}的支持程度上,但是这实际上是一种Hack,基本上不具备通用性,知道这个方法就可以了。需要提醒的是IE6 standards-compliant模式下HTML元素不管给它设置什么样的高度和宽度,它的大小都始终充满整个浏览器的可视区域,而IE5 以及 Quirks 模式下html元素和body元素所有宽高设置都会被忽略而保持充满浏览器的可视区域.

或许有人会想,现在可以引入了XML Prolog又能用纯CSS方法解决了IE7以下的问题,这下爽了,但是加上XML Prolog后突然发现IE6处于Quriks模式,以前在standards-compliant模式下的设计又变形了,呵呵,这就是咱们搞IE的下场。

举报

  • 相关推荐
  • AI时代,浏览器的排位赛重新开启

    过去一周,WAIC 带给我们的感官刺激,已经从过去的大模型参数彻底走向AI应用革命。 但是我们所感知到的可能只是庞杂的碎片,如果梳理互联网大厂当下AI 叙事的重点,集体所向,还要从别处寻找答案。 比如,对于信息入口的定义,对于全新AI 交互形态的探索,路线其实越来越明朗。 当 OpenAI 宣布代号为「Aura」的AI浏览器进入开发阶段时,科技圈再次意识到:这场由大模型�

  • AI日报:扣子空间网页设计功能上线;阿里Wan 2.2即将上线;​OpenAI即将发布 GPT-5

    【AI日报】今日AI领域重要动态:1)Coze推出网页AI设计功能,5分钟生成网页;2)通义千问发布Qwen-MT翻译模型,支持92种语言;3)ChatGPT全面推出Agent功能;4)阿里云Wan2.2视频生成AI即将上线;5)Anthropic推出审计Agent提升AI对齐测试;6)OpenAI计划8月发布GPT-5;7)谷歌发布无代码AI应用开发工具Opal;8)南洋理工与上海AI Lab推出PhysX-3D项目,为3D模型添加物理属性;9)快手开源KAT-V1大模型,40B版本性能接近DeepSeek-R1;10)讯飞星火X1升级版上线,在多语言和语音处理方面显著提升。(140字)

  • 迅雷浏览器2.0全新上线:极致简约 无推送、无资讯、无打扰

    迅雷浏览器2.0现已全新上线,此次升级以极简,快”为核心理念,从搜索、播放、阅读到存储等多个关键场景进行全方位重塑。 界面设计剥离冗余元素,仅保留核心功能按钮,实现 无推送、无资讯、无打扰”的纯净体验。 在搜索场景中,浏览器内置必应、360、百度、搜狗、夸克等主流搜索引擎,输入关键词即可秒获结果,同时支持自定义添加引擎,精准适配个人搜索习惯。

  • 全网超150亿次浏览,谁在做那艺娜的“抽象生意”?

    ​58岁的那艺娜,迎来了属于她的“抽象时代”。 今年五月起,她携《爱如火》进击LiveHouse,场场“售如罄”的捷报堆起话题和流量。 首场演唱会伴奏中传来童音,假唱舞台被喊“退票”。没成想后来“退票”成了粉丝的应援词,娜姐的节拍器,在多次尴尬抢拍后,那艺娜发现观众喊8声退票就能稳稳开场。 商业带货上,她同样生猛。7月中旬,那艺娜为好望水站台,一首《�

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • 前方突然让路不要得意要警惕!雷军:这驾驶技巧很重要

    今天下午,小米创办人雷军分享了小米精英驾驶高阶驾驶培训的安全驾驶指南。 这份指南介绍了一则驾驶技巧,在车流中行驶,前车突然让路,大概率是因为前方有需要躲避的物体或者人,小心观察前方情况,注意保持前后车距,找准机会变道脱险。雷军强调,这个驾驶技巧很重要。 据了解,小米精英驾驶高阶驾驶培训项目旨在通过系统化教学提升用户的实际驾驶操控能力�

  • 免费入场+高能福利!AGON爱攻ChinaJoy CS水友赛玩家招募通道即刻开启

    2025年ChinaJoy将于8月1-4日在上海举办,AGON爱攻将携手完美世界电竞打造精彩赛事活动。亮点包括:水友可报名与传奇战队"钢盔队"对决,还有机会与三大CS主播组队;现场将展示多款电竞显示器新品,包括CS24A定制款;参与互动问答和抽奖有机会赢取AGON大礼包。活动地点为N1-G201完美世界展区主舞台,14:00开赛。线上观众关注B站AGON官方账号参与话题互动也有福利。这是一�

  • 剑指谷歌Chrome!OpenAI即将推出AI浏览器

    据媒体报道,OpenAI即将推出的AI浏览器,利用人工智能技术彻底重塑用户的网络浏览体验,直接向占据市场主导地位的谷歌 Chrome 发起挑战。 凭借庞大的每周4亿活跃ChatGPT用户基础,OpenAI的浏览器若被广泛接纳,将对谷歌的广告生态系统、网络数据流和搜索流量构成实质性威胁。谷歌Chrome长期以来是Alphabet广告业务的基石,为其精准广告投放和将流量导向自家搜索引擎提供了关�

  • 水乡感质 设计探本!ASKO在水乡乌镇开启设计游学之旅

    7月25-27日,第三届ASKO非凡设计大奖在乌镇举办设计游学活动。活动以"水乡质感+设计探本"为主题,邀请设计师们走进木心美术馆、西栅染坊等场所,感受传统与现代交融的水乡美学。ASKO中国区总经理华安、《IDEAT理想家》出版人杨莹等嘉宾参与,共同探讨理想人居设计。活动期间还恰逢贝多芬《命运交响曲》音乐会,设计师们在艺术氛围中汲取灵感。ASKO作为北欧百年家电品牌,秉持极简设计与人文关怀理念,致力于推动美好生活方式。

  • REDMI Pad 2定位千元大平板 王腾:老人看剧、小朋友学习都合适

    今日,REDMI推出全新平板电脑REDMI Pad 2,目前已在小米商城、电商平台开启预约,将于8月1日正式开售。 官方暂未公布新品价格,但根据REDMI品牌总经理王腾介绍,这是一款千元大平板,放在家里给老人看剧、小朋友学习都非常合适。 作为参考,2022年发布的初代REDMI Pad起售价1299元(4GB 128GB),2024年发布的REDMI Pad Pro起售价1499元(6GB 128GB)。