CSS在IE6下的一些BUG和兼容性问题

在IE6,7下面PNG图片问题:

在IE6下,不支持PNG透明图片,解决办法是:在HTML里加上以下一段代码,其中DD_belatedPNG_0.0.8a.js文件可以在百度上找到,DD_belatedPNG_0.0.8a.js是国外一个大神写的JS文件。

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix(‘*‘);
</script>
<![endif]-->

宽度内容撑开问题:

<style>
    .box{width:400px;}
    .left{background:red;float:left}
    .right{background:blue;float:right;}
    h3{margin:0;height:30px;float:left;}
    /*
        在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动
    */
</style>
<body>
<div class="box">
    <div class="left">
        <h3>左侧</h3>
    </div>
    <div class="right">
        <h3>右侧</h3>
    </div>
</div>
</body>

正常:

在IE6下:

元素选择器“>”问题

子元素选择器>在IE6下不支持。

<style>
div>h3{background:red;}
</style>
<body>
<div>
    <h3>我是h3</h3>
</div>
</body>

正常:

在IE6下:

IE6最小高度问题

<style>
    .box{height:2px;background:red;overflow:hidden;}
/*IE6下最小高度问题
在IE6下元素的高度小于19px的时候,会被当做19px来处理
解决办法:overflow:hidden;
*/
</style>
<body>
<div class="box"></div>
</body>

正常:

在IE6下:

1px dotted问题

<style>
    div{margin-top:50px;}
    .box{width:100px;height:100px;border:1px dotted #000;}
    .box1{width:100px;height:100px;border:1px dashed #000;}
/*
1px dotted在IE6下不支持,
解决办法:切背景平铺

dotted:点线
dashed:蚂蚁线;

*/
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>

左边是IE6,右边正常:

Margin传递问题:

<style>
    body{margin:0;}
    .box{background:blue;border:1px solid #000;zoom:1;}
    .div{width:200px;height:200px;background:red;margin:100px;}
</style>
<!--
在IE6下,父级没有边框时,会发生margin传递,
解决办法:触发父级的haslayout

在IE6下父级有边框的时候,子元素的margin值消失
,解决办法:触发父级的haslayout,
-->
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>

正常:

在IE6下:

双边距bug问题:

<style>
    .box{width:200px;height:200px;
    background:red;float:left;margin:100px;display:inline;}
    body{margin:0;}

    /*
    IE 6下双边距
    在IE6 下,块元素有浮动和横向的margin值的时候
    横向的margin值会被放大成两倍
    解决办法:display:inline;
    */
</style>
<body>
<div class="box"></div>
</body>

正常:

在IE6下:

双边距bug2

<style>
    .box{float:left;border:10px solid #000;}
    .box div{width:100px;height:100px;background:red;margin-right:20px;
    border:5px solid #ccc;float:left;display:inline;}
</style>
<!--
在IE6下
margin-right:一行右侧第一个元素有双边距
margin-left:一行左侧第一个元素有双边距

解决办法:display:inline。
-->
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
</body>

Li间隙问题:

<style>
    ul{margin:0;padding:0;width:302px;}
    li{list-style:none;height:30px;border:1px solid #000;
    vertical-align:top;}
    a{width:100px;float:left;height:30px;background:red;}
    span{width:100px;float:right;height:30px;background:blue;}
/*
在IE6,7下,li本身没有浮动,但是li的内容浮动,li下边就会
产生一个间隙
解决办法:
1.给li加上浮动
2.给li加上vertical-align:top;

注意:当IE6下最小高度问题和li的间隙问题共存的时候,
要给li加浮动
*/
</style>
<body>
<ul>
    <li>
        <a href="#"></a>
        <span></span>
    </li>
    <li>
        <a href="#"></a>
        <span></span>
    </li>
    <li>
        <a href="#"></a>
        <span></span>
    </li>
</ul>
</body>

正常:

在IE6下:

Margin值消失问题:

<style>
    .box{border:10px solid #000;width:600px;
    overflow:hidden;}
    .box div{width:100px;height:100px;
    background:red;margin:20px;border:5px solid #ccc;
    float:left;display:inline;}
    /*
    当一行子元素占有的宽度之和和父级的宽度相差超过
    3px,或者有不满行状态的时候,最后一行的子元素
    的下margin在IE6下就会失效
无解。。。郁闷。。。
    */
</style>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>

正常:

在IE6下:

文字溢出问题

<style>
    .box{width:400px;}
    .left{float:left;}
    .right{width:400px;float:right;}
</style>
<body>
<div class="box">
    <div class="left"></div>
    <div><!—我是注释哈哈哈哈哈哈哈--><span></span></div>
    <div class="right">我是该死的IE6</div>
</div>
<!--在IE6下的文字溢出bug
子元素的宽度和父级宽度相差小于3px的时候,两个浮动元素中间
有注释或者有内嵌元素
解决办法:用div把注释或者内嵌元素包起来
-->
</body>

正常:

在IE6下:

定位元素消失

<style>
        .box{ width:200px;height:200px;border:1px solid #000; position:relative;}
        span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
        ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
        /*
            当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失
            解决办法:
                给定位元素外面包个div
        */
    </style>
</head>
<body>
<div class="box">
    <ul></ul>
    <span></span>
</div>
</body>

正常:

在IE6下:

父级包不住子元素问题

<style>
    .box{width:200px;height:200px;border:1px solid #000;
    overflow:auto;position:relative;}
    .div{width:150px;height:300px;background:yellow;
    position:relative;}
    /*
    在IE6.7下,子元素有相对定位的话,父级的overflow包不住子元素
    解决办法:给父级也加相对定位
    */
</style>
<body>
<div class="box">
    <div class="div"></div>
</div>
</body>

正常:

在IE6下:

像素偏差问题

<style>
    .box{width:201px;height:201px;border:1px solid #000; position:relative;}
    .box span{ width:20px;height:20px;background:yellow; position:absolute;right:-1px;bottom:-1px;}
    /*
        在IE6下绝对定位元素的父级宽高是奇数的时候,元素的right值和bottom值会有1px的偏差
    */
</style>
<body>
<div class="box">
    <span></span>
</div>
</body>

正常:

在IE6下:

表单控件空隙问题:

<style>
        .box{ width:200px;height:32px;border:1px solid red;}
        input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
        /*
            在IE6,7下输入类型的表单控件上下各有1px的间隙

            解决办法:给input加浮动
        */
    </style>
</head>
<body>
<div class="box">
    <input type="text" />
</div>
</body>

正常:

在IE6下:

表单控件问题:

<style>
        .box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
        input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
        /*
            在IE6,7下输入类型的表单控件上下各有1px的间隙
            解决办法:给input加浮动
            在IE6,7下输入类型的表单控件加border:none;
            解决办法: 重置input的背景
            在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动
            解决办法: 把背景加给父级
        */
    </style>
</head>
<body>
<div class="box">
    <input type="text" />
</div>
</body>

Div居中问题:

一般div居中的写法:margin:0 auto;

低版本IE不支持,解决办法:text-align:center,给要居中的div添加一个父级,父级添加text-align:center,注意,这样会引起一个问题,父级里面的文字也会居中,所以还要给居中的元素加上text-align:left。

父级包不住子元素问题:

Overflow属性的使用,结合float

IE的低版本中,包含框默认会显示所有的内容,撑开框,高度失效,解决办法:设置overflow属性。。

时间: 2024-10-23 20:43:29

CSS在IE6下的一些BUG和兼容性问题的相关文章

CSS中IE6下双边距BUG解决方案

其实这个问题在刚学习CSS的时候就知道怎样解决了,但是一直不知道为什么会出现这种现象,今天顺便记录一下. 1.为什么会出现双边距BUG? <style type="text/css"> body,div{padding: 0;margin: 0;} .box{border: 10px solid black;float: left;} .inner{width: 100px;height: 100px;background: red;float: left;margin:

ie6下常见的bug 调整页面兼容性

ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调试兼容性,下面小强老师就把一些常见的ie6bug列出来,大家去研究下. 考虑结构的稳定性最常见的问题就是网页元素位置混乱,错位. 1.1.1.DOCTYPE 必须有 必需在开头处使用<!DOCTYPE>标记为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能将该网页作为有效的XHTM

【css】ie6下使用css sprit 滤镜做透明图片

.service{ /*position:relative;*/ height:96% !important;overflow: hidden;} .pright{ height:40px; text-align:right; margin-top:30px; padding-right:50px; overflow:hidden; } .pright .btn_order{ background:url('../images/order_icon02.png') 0 0 no-repeat;

浮动元素的兼容以及ie6下li标签的部分兼容性问题

清除浮动的方法有许多比较常用的是 .clear{zoom: 1;} .clear:after{content: "";display: block;clear: both;} after伪类元素末尾添加内容Ie6,7不兼容可以用zoom来解决(zoom缩放会触发ie下的haslayout使元素根据自身内容计算宽高但火狐不支持但可以通过after伪类解决) 两者结合解决的浏览器不兼容的问题: ie6下li标签的部分兼容性问题: 可以通过给li标签加 vertical-align: top

IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动. 2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理.解决方案:给元素加 overflow:hidden. 3. border:1px dotted #000: 1px dotted 在IE6下不支持 解决方案:切背景平铺 4. margin传递:解决方案:a.父级或自己浮动; b.给元素加 overflow:hidden;zoom:1; 5. 在IE6下父级有边框的时候,子元素的margi

IE6下兼容问题(转载)

()1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本. <![endif]--> <!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6). <![endif]--> <!--[if IE 5.5]> 这段文字仅显示在 IE5.5. &

ie6下兼容问题

最小高度问题:overflow:hidden 在ie6.7下 li本身不浮动 内容浮动 li产生3像素间隙 解决:vertical-align:top; 二.当ie6下最小高度问题和li间隙问题共存时 给li加浮动 滤镜:标准浏览器[opacity:0.5] ie6[filter:alpha(opacity=50)] 图片底部3像素问题:vertical-align:top; padding是占位置的. ie6下 子元素会撑开父级设置好的宽高  : 计算一定要正确,不要让内容的宽高,超出设置的宽

常见ie6的浏览器兼容bug

1.文字本身的大小不兼容 同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的, ie下实际占高16px,下留白3px ff 下实际占高17px,上留白1px,下留白3px opera下就更不一样了 解决方案:给文字设定 line-height .确保所有文字都有默认的 line-height 值. 2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大, 而ie6下是会被内容撑大,高度限定失效,ie7,8,9都不会撑大. 所以不要

IE6下的bug

一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG 二.IE6中3像素问题及解决办法 当元素使用float浮动后,元素与相邻的元素之间会产生3px的间隙.诡异的是如果右侧的容器没设置高度时3px的间