0

0

css ie兼容写法有哪些

PHPz

PHPz

发布时间:2023-04-24 09:08:59

|

1202人浏览过

|

来源于php中文网

原创

css是网页设计中非常重要的一部分,但是在不同的浏览器中,css的兼容性是个非常头疼的问题。特别是在ie浏览器中,css兼容性的问题更为突出。因此,在编写css样式时必须注意ie浏览器的兼容性,本文将介绍一些常用的ie兼容写法。

一、常见的IE浏览器兼容性问题

在IE浏览器中,常见的CSS兼容性问题有以下几个:

  1. 盒模型:IE6、IE7不支持标准盒模型,而是采用了IE盒模型,这就导致了当设置width 和 height时,元素的实际宽高和设计宽高有出入。
  2. PNG24图片透明:IE6不支持PNG24图片的透明,需要使用JavaScript为IE6单独设置透明。
  3. 清楚浮动:IE6不支持浏览器的自动清除浮动,需要使用clear:both来手动清除浮动。
  4. 定位:IE6不支持position:fixed,可以使用position:absolute来达到相同的效果。

二、常用的IE浏览器兼容写法

  1. IE6浏览器下图片背景不被覆盖

在IE6中,如果一个元素同时设置了背景图和背景颜色,会出现背景图片不被背景颜色覆盖的情况。此时需要对容器元素增加一个 _filter 属性,将其值设置为 “inherit” 即可。

立即学习前端免费学习笔记(深入)”;

.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}
  1. IE6浏览器下border不被覆盖

在IE6中,当两个块状元素或两个inline元素相遇时,会出现border不被覆盖的情况。此时可以通过设置一个空的div来解决这个问题。

.box{ background:#fff; border:1px solid #ccc; position:relative; zoom:1; } .inner{ width:100%; height:100%; position:absolute; top:0; left:0; }

上述代码通过设置position:relative和zoom:1来触发IE浏览器的hasLayout机制,并通过设置一个空的div元素,将border显示出来。

  1. IE6浏览器下margin重叠问题

在IE6中,当两个相邻元素的margin-top和margin-bottom重叠时,会出现margin重叠的情况。此时可以给上面的元素设置一个padding-top,避免margin重叠。

.parent{ padding-top:1px; } .children{ margin-top:10px; height:50px; background:#ccc; }
  1. IE6下PNG24图片的透明问题

为了在IE6中支持PNG24图片的透明,可以在图片上套一层div,并在这个div上加上一段JavaScript代码。

玻璃钢企业网站源码1.5
玻璃钢企业网站源码1.5

本程序源码为asp与acc编写,并没有花哨的界面与繁琐的功能,维护简单方便,只要你有一些点点asp的基础,二次开发易如反掌。 1.功能包括产品,新闻,留言簿,招聘,下载,...是大部分中小型的企业建站的首选。本程序是免费开源,只为大家学习之用。如果用于商业,版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器,ie6+,Ch

下载

HTML代码:

css ie兼容写法有哪些

CSS代码:

div.png{
    position:relative;
    _behavior: expression(
        function( ele ){
            ele.innerHTML = '';
        }(this)
    );
}

上述代码中,_behavior属性可以将JavaScript代码绑定到该元素上,并在其内部执行。

  1. IE下固定定位的实现

在IE浏览器中,无法支持position:fixed属性,但是通过JavaScript可以实现类似的效果。

JavaScript代码:

function fixedPosition() {
    var obj = document.getElementById("fixed_obj");
    var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop;
    obj.style.top = top + "px";
}

window.onscroll = fixedPosition;

//初始时就调用一次以免刷新后没有滚动事件而没有效果
fixedPosition();

需要注意的是,如果兼容IE7及以上浏览器,应该设置DOCTYPE,否则IE将以怪异模式渲染页面,可能会出现兼容性问题。

本文总结了一些常用的CSS IE兼容写法,希望对大家有所帮助。在实际项目中,应该不断总结和探索更好的IE兼容写法,提高网页的兼容性和用户体验。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

3

2026.01.16

java数据库连接教程大全
java数据库连接教程大全

本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

26

2026.01.15

Java音频处理教程汇总
Java音频处理教程汇总

本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

12

2026.01.15

windows查看wifi密码教程大全
windows查看wifi密码教程大全

本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

35

2026.01.15

浏览器缓存清理方法汇总
浏览器缓存清理方法汇总

本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

5

2026.01.15

ps图片相关教程汇总
ps图片相关教程汇总

本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

8

2026.01.15

ppt一键生成相关合集
ppt一键生成相关合集

本专题整合了ppt一键生成相关教程汇总,阅读专题下面的的文章了解更多详细内容。

4

2026.01.15

php图片上传教程汇总
php图片上传教程汇总

本专题整合了php图片上传相关教程,阅读专题下面的文章了解更多详细教程。

2

2026.01.15

phpstorm相关教程大全
phpstorm相关教程大全

本专题整合了phpstorm相关教程汇总,阅读专题下面的文章了解更多详细内容。

4

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号