CSS中常见的bug问题,你应该这样解决

margin无效(IE5及以下)

最外层div在IE浏览器中水平居中,设置margin: 0 auto;无效;

- hack: body中还需要添加text-align: center;

图片间隙

div中的图片间隙(该bug出现在IE6以及更低版本中),在div中插入图片时,图片会将div下方撑大3个像素;

- hack1: 将 </div>和 <img> 写在同一行;
- hack2: 将<img>转为块元素,即是添加display: block属性;
- hack3: 给父类添加font-size:0;(不推荐)
- hack4: 给<img>加float:left/right
- hack5: 给<img>加vertical-align:top

默认高度(例如div)

在IE6以及更低版本中,部分元素拥有默认高度(低于18px高度);

- hack1: 给元素添加声明,font-size: 0;
- hack2: 给元素添加声明,overflow: hidden;

百分比bug

在IE7以及更低版本中,在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的 .

hack: 给右边的浮动元素添加声明:
      clear: right; // 清除右浮动
	  清除浮动:
      clear: right; // 清除右浮动 
      clear: left;  // 清除左浮动
      clear: both;  // 清除两边的浮动

透明属性

- IE浏览器写法: filter: alpha(opacity=value); (value取值范围0~100)
- 兼容其他浏览器写法: opacity: value; (value取值范围0~1)

边框问题

在IE6以及更低版本浏览器中,如果想要去掉默认边框,需要将border属性值设置为0,即可以兼容多个浏览器;

 bug: IE6以及更低版本浏览器中,border: none;去除不了边框;
 hack: 直接使用border: 0;

按钮元素默认大小不一

- hack1: 统一大小
- hack2: input外边套一个标签,在这个标签中写按钮的样式,把input的边框去掉; 
- hack3: 如果这个按钮是一个图片,直接把图片作为按钮的背景图即可;

按钮解析边框问题

对于所有浏览器都会存在,按钮解析边框的问题

> 设置一个div,一个按钮,一个文本输入框
> 三个高度宽度都一样,都将边框去掉,设置为左浮动
> 三个元素显示都是一致的
> 问题展示: 三个元素分别加上1px的边框,此时按钮显示会出现差异
原因: 
按钮不管是否添加边框,它都是存在的,而其他元素添加边框的时,是添加在元素之外的,这也就导致其他元素都会相对应变大,而按钮却没有任何变化;
解决: 
之后出现按钮和文本框一起出现且高度是一致时,要么按钮加上2px,要么文本框减去2px;

聚焦时外边框变蓝

搜索输入框input在360游览器(兼容模式)下显示,在获得焦点时外边框变蓝,而其他FF、IE、Google均未变蓝,现在需要将网页中的所有输入框,都被设计为“获得鼠标焦点时外边框不变蓝”。

其实,是由于各个游览器的outline默认值不同导致的,解决的方法很简单,将定义outline属性为none,将下面的css代码加入相对应的选择器中。outline不会像border那样影响元素的尺寸或者位置。

hack1:  input:focus{outline:none;}
hack2:  input:focus{outline:0;}

表单元素行高不一致

描述:表单元素行高对齐方式不一致

hack : 给表单元素添加声明:float:left;

列表bug

    bug1: 当给li中的a添加float: left; li没有设置浮动属性,会出现垂直效果;
    hack: 给li设置浮动效果即可;

    bug2: 当给li中的a转为块元素,并设置固定高度时,li是有浮动的情况下,会出现垂直效果;
    hack: 给a标签添加浮动即可;

    bug3: 当给li中的a转为块元素,并设置固定高度时,且有添加浮动效果,就会出现阶梯状效果;
    hack: 给li中的添加浮动(即li和a都需要添加浮动);

    备注: 
      都不设置宽度,都通过给a设置padding将li撑开;

最小宽高度

语速具备最小宽高度的自适应:IE6及以下版本不识别该属性

bug1. min-height / min-width : 最小高度(宽度)
bug2. max-height / max-width : 最大高度(宽度)
bug3. height:auto!important;(由内容撑起来)

兼容元素具备最小高度自适应的方法:

hack1. min-height:value; _height:value;(过滤器)
   对于ie6来说,height本身具有min-height的作用
hack2. min-height:value; height:auto!important; height:value;(建议使用)

发布了18 篇原创文章 · 获赞 35 · 访问量 2165

猜你喜欢

转载自blog.csdn.net/wxd_97/article/details/104736887