骨灰级清除浮动


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
*zoom:1; //兼容ie
}

内联元素相连之间存在间隙问题


原因:内联元素是当做字体来处理的,字体之间是有间隔的

解决方法:

1.多个标签写在一行

2.将要闭合标签的地方与开始标签的地方重合

3.使用注释头尾相连

4.在父级上写:font-size:0;

5.使用display:block(img是内联元素)

6.使用letter-spacing属性

块级元素包裹内联元素的时候,总会出现几像素的差问题


<!--例子1-->
<div>
<img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg">
</div> <!--例子2-->
<ul>
<li>
<img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg">
</li>
</ul> <!--例子3-->
<div>
<span>asdasdasd</span>
</div>

解决方法:设置内联元素属性:display:block;

CSS垂直居中方法


使用时一定要给出元素宽高

 width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

CSS Hack


指的是针对不同的浏览器写对应的CSS

有三种hack方式

1.html hack(添加不同的类来区别)

<!--[if lt IE 7 ]><html class="ie6" lang="zh-cn"><![endif]-->
<!--[if IE 7 ]><html class="ie7" lang="zh-cn"><![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="zh-cn"><![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="zh-cn"><![endif]-->

2.选择器 hack

* html .test{color:#090;} /* For IE6 */
* + html .test{color:#ff0;} /* For IE7 */

3.属性hack

color:#fff\0; /*:选择IE8+和Opera*/
color:#090\9; /* For IE浏览器 */
*color:#f00; /* For IE7 */
_color:#ff0; /* For IE6 */

ie6.7不支持box-sizing: border-box问题


解决:使用https://github.com/Schepp/box-sizing-polyfill这个垫片,稳定性差

注意:*behavior: url(../resource/js/lab/boxsizing.htc);这个URL是相对于HTML页面的!!

ul中li下面的间隔线用li布局边框问题


在IE低版本下有bug,会多出li的宽高

解决:间隔线使用li的border去做

ie8及以下的浏览器不支持:befor.:after问题


使用left:expression(eval(document.documentElement.scrollLeft))top:expression(eval(document.documentElement.scrollTop))

.leftTop{
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop));
}

低版本浏览器下position:fixed闪动问题


解决:

*html{
background-image:url(about:blank);
background-attachment:fixed;
}

IE6双倍margin,padding边距的问题


内部元素一旦浮动,就会出现双倍的BUG

解决:给内部元素添加display:inline属性

IE6中设置宽高位10px的时候出现的是长方形问题


这个现象的另一种情况是:在IE6中定义比较小的高度问题。

原因:IE6有默认行高

解决:使用font-size:0;line-height:0;

IE6无法识别伪对象:first-letter/:first-line问题


类似这样解决:

p:first-letter {}

在first-letter与"{"间增加空格

IE6下忽略!important问题


如下写法在IE6下不起作用

div{
color:#f00!important;
color:#000;}

解决:更改写法

div{color:#f00!important;}
div{color:#000;}

父元素与子元素之间的margin-top问题(BFC问题)


现象:给第一个子元素设置margin-top属性后,父元素也会下移

代码示例:

 <style type="text/css">
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content{
background-color:#6699FF;
width:200px;
height:200px;
}
</style> <div class="wrapper">
<div class="content"></div>
</div>

解决:

1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)

2、为父元素添加overflow:hidden;样式即可(完美)

3、为父元素或者子元素声明浮动(float:left;可用)

4、为父元素添加border(border:1px solid transparent可用)

5、为父元素或者子元素声明绝对定位

元素浮动导致父元素塌陷问题


见例子:

<div class='outer' style="width: 300px;background-color: gray">

        <div class='innner' style="width: 100px;height: 100px;background-color: blue;float: left;"></div>

    </div>

解决方法:

1.给父元素添加overflow:hidden属性

2.给父元素添加清除浮动伪类

.outer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}

IE6中li之间会有间距

解决方法:float: left;

IE6挨着的div元素产生3像素差值问题


解决:使用绝对定位然后内补边

相邻的块状元素margin叠加问题(BFC问题)


见例子:

p{
margin-bottom: 100px;
margin-top: 100px;
} ... <div>
<p>asdasdasdas中国</p>
<p>asdasdasdas中国</p>
<p>asdasdasdas中国</p>
</div>

结果p直接的margin发生了合并变成了50px。

解决:给最后一个p元素添加left/right浮动,触发BFC。

参考链接:解决margin合并(折叠)的方法

CSS的兼容性与BUG处理的更多相关文章

  1. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  2. 浏览器的兼容性(CSS浏览器兼容性、CSS hack)

    一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在 ...

  3. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  4. css 常见兼容性问题及解决方案

    css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧. 一. 浮动元素双边距. ①条件:ie6下,如果给元素设置 ...

  5. CSS常见兼容性问题总结

    原文链接:渔人码头 http://www.cnblogs.com/imwtr/p/4340010.html?utm_source=tuicool&utm_medium=referral 浏览器 ...

  6. HTML+CSS浏览器兼容性问题

    浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    ...

  7. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  8. IE和FireFox关于CSS的兼容性

    1. [代码][Java]代码 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2 ...

  9. CSS浏览器兼容性问题解决方法总结

    CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6 ...

随机推荐

  1. (中等) POJ 1703 Find them, Catch them,带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  2. memcached命令和配置

    转自:http://www.tuicool.com/articles/VJzAvuB 安装配置 首先,编译.安装.配置libevent库,执行如下命令: wget https://github.com ...

  3. iOS开发——代理与block传值

    一.代理传值的方法 1.Hehe1ViewController.h中 #import <UIKit/UIKit.h> @protocol Hehe1ViewControllerDelega ...

  4. linux获得目录下文件个数

    获得当前目录下文件个数赋值给变量panonum: panonum=$(ls -l |grep "^-" | wc -l) 获取指定目录下文件个数赋值给指定变量: panonum=$ ...

  5. RabbitMQ消息队列(三):任务分发机制

    在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题.在实际的应用场景中,这是远远不够的.从本篇文章开始,我们将结合更加实际的应用场景来 ...

  6. scala系列--基础语法

    Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的. 区分大小写 -  Scala是大小写敏感的,这意味着标识Hello 和 hello在Scala中会有不同的含义. 类 ...

  7. iOS 程序开发

    准备 iOS 开发 之 编程知识点 iOS 程序调试 iOS 之 OC开发实战 iOS 架构模式 iOS 之 新功能.扩展

  8. Mysql中如何创建、删除授权用户

    在mysql数据库下使用create user创建新用户,例如: 新创建后的用户没有任何授权.使用grant命令授权xushouwei访问数据库databaseweb下的所有表,密码为xsw12345 ...

  9. METRO风格

    METRO风格是指微软在WINDOWS PHONE 7中新加入的界面风格,并且计划将其用于windows8中的开始菜单界面.该界面的特点是简洁高效,每一个METRO图标都没有边框,形状有点像地铁站中的 ...

  10. iOS 之 绘图简介

    iOS 实现图形编程主要有三种技术:UIKit.Core Graphics.OpenGL. 绘图需要在图形环境中进行,图形环境分为三种:屏幕图形环境.off screen 位图环境和PDF图形环境.在 ...