兼容性—IE6定位

父级元素宽高为奇数时，绝对定位的right和bottom会有1px的偏差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 401px;
            height: 401px;
            background: red;
            position: relative;
        }
        .content{
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

IE6显示效果如下：

解决方案：避免设置父级元素的宽高为奇数

时间： 2024-10-20 00:27:22

兼容性—IE6定位的相关文章

兼容性—IE6下浮动元素和定位元素并列，定位元素消失

浮动元素和定位元素同级,定位元素消失,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 400px; height: 400px; position: relative; border:1px solid b

兼容性—IE6/7/8下input空隙问题

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 300px; border:1px solid black; background: red; } input{ width: 200px; height:

IE6中很多Bug都可以通过触发layout得到解决,以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout.下列的CSS属性或取值会让一个元素获得layout: position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题float:left|right 由于layout元素的特性,浮动模型会有很多怪异的表现 display:inline-block 当一个内联级别的元素需要layout的时候就

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position：relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; bord

兼容性—IE6下文字溢出

两个浮动元素之间用内联元素或者注释并且和父级宽度不超过3px,IE6下出产生文字溢出bug,具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 400px; } .left{ float: left; }

兼容性— IE6下子元素宽高会撑大父级

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; border:10px solid black; } .content{ width: 400px; height: 400p

兼容性—IE6/7下当li里面的元素都浮动，li之间会产生4px的缝隙

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ margin: 0px; padding: 0px; width: 300px; list-style: none; } li{ height: 30px; line-heig

ie6的常见兼容性问题

(一):选择器的兼容问题 1.对于一般的选择器如id选择器.类选择器.标签选择器,IE6和其他浏览器一样都兼容: 2.子代选择器(E>F),序选择器(E:first-child.E:last-child).兄弟选择器(E+p)这些选择器IE6都不兼容{主要是css2中的选择器,css3中的先不谈} (二):双倍margin问题 1.何为双倍的margin? 解释:就是说当我们连续浮动元素时,如果浮动元素的浮动方向和我们设置的margin方向相同时,浮动元素的第一个元素就会具有双倍的margin值

网页排版中的浮动和定位（学习笔记）

CSS中的浮动和定位在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性虽然浮动和定位很重要,但是在以后的网页写作中,还是尽量少用,最好别乱用,不然后面问题很大,特别是对初学者.最好要把浮动和定位要搞清楚在使用. 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设置宽.高,宽度为父盒子的100%.例如:div.p.标题元素(h1-h6).列表元素(ul li.dl dt dd) 3.行内元素(in