CSS的一些Bug

样式覆盖

.center 中的段落背景色都是红色 希望其中的.inner 是白色,结果都是红色。
.center p{
    background-color: red;}
.inner{
    background-color:white;}
因为浏览器认为.inner没有.center p 特殊。所以以下修改
.center .inner{}

外边距重叠

当你有垂直方向的div布局时,两个20px的外边距可能重叠成一个20px的外边距,这就是外边距重叠bug。方法是增加边框或内边距。

三像素文本偏移

浮动元素旁边是一个不围绕此元素的文本,这时文本和浮动元素间有一个三像素的间距。
1.文本设置任意高度,来迫使成为布局元素,但是布局元素会在浮动元素旁边,所以以前的margin需要设置为0px。
设置任意高度限于IE6以下,margin设置在IE5 6.
2.这是浮动元素又会出现3px偏移,设置margin:-3px。
3.如果浮动元素是图像,IE5会左右增加3pxmargin IE6不会增则还需要对IE5 6 进项设置。margin:0 -3px;margin:0;

IE6重复字符

一系列浮动元素间有注释时会出现 删除注释 因为修改bug会对IE7有影响。

IE6藏猫猫

浮动元素后跟着非浮动元素,然后是清除元素,中间非浮动的元素文本可能会消失。
指定行高或者position:relative;

相对容器中的绝对定位

这个bug经常在IE6以下的浏览器出现。此时的绝对布局会相对于页面,而不是父类标签。
方法:让IE6一下的相对容器获得布局设置显示的宽高。


IE的布局元素

IE中拥有布局的元素负责控制本身盒子元素尺寸和定位。如果没有则最近的布局父元素控制。(布局只是在IE中有 CSS中没有)
布局元素:body html(标准) table tr td img hr input select textarea button iframe embed object marquee
css属性使其拥有布局:float:left right;diaplay:inline-block; width heigth zoom writing-mode:tb-tr;
IE7支持:overflow:hiddle scroll auto三个值; min-width:所有值; max-width:除了none;
布局特性:1布局元素不会收缩 2自动清理浮动 3相对定位的没有布局 4布局元素见外边距不叠加
                5没有布局的块级连接单击区域只覆盖文本 6滚动时列表背景间歇性闪烁

你可能感兴趣的:(CSSbug)