css ie兼容写法有哪些-前端问答-PHP中文网

css ie兼容写法有哪些

PHPz

发布： 2023-04-24 09:08:59

原创

1195人浏览过

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

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

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

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

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

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

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

立即学习“前端免费学习笔记（深入）”；

.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}

登录后复制

IE6浏览器下border不被覆盖

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

<div class="box">
    <div class="inner"></div>
</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显示出来。

IE6浏览器下margin重叠问题

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

<div class="parent">
    <div class="children"></div>  
</div>

.parent{
    padding-top:1px;    
}

.children{
    margin-top:10px;
    height:50px;
    background:#ccc;
}

登录后复制

IE6下PNG24图片的透明问题

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

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

HTML代码：

<div class="png">
    <img src="images/logo_bg.png" />
</div>

登录后复制

CSS代码：

div.png{
    position:relative;
    _behavior: expression(
        function( ele ){
            ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>';
        }(this)
    );
}

登录后复制

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

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兼容写法，提高网页的兼容性和用户体验。

以上就是css ie兼容写法有哪些的详细内容，更多请关注php中文网其它相关文章！