骨灰级清除浮动
.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--><p><img src="http://images.cnblogs.com/cnblogs_com/zqzjs/757818/o_u=3986871593,628400456_fm=21_gp=0.jpg"></p><!--例子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--><p><span>asdasdasd</span></p>
解决方法：设置内联元素属性: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下不起作用
p{
color:#f00!important;
color:#000;}
解决:更改写法
p{color:#f00!important;}p{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><p class="wrapper">
<p class="content"></p>
</p>
解决:
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位
元素浮动导致父元素塌陷问题
见例子:
<p class='outer' style="width: 300px;background-color: gray"> <p class='innner' style="width: 100px;height: 100px;background-color: blue;float: left;"></p> </p>
解决方法：
1.给父元素添加overflow:hidden属性
2.给父元素添加清除浮动伪类
.outer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
IE6挨着的p元素产生3像素差值问题
解决:使用绝对定位然后内补边
相邻的块状元素margin叠加问题(BFC问题)
见例子:
p{
margin-bottom: 100px;
margin-top: 100px;
}
... <p>
<p>asdasdasdas中国</p>
<p>asdasdasdas中国</p>
<p>asdasdasdas中国</p>
</p>
结果p直接的margin发生了合并变成了50px。
解决:给最后一个p元素添加left/right浮动，触发BFC。
更多CSS的兼容性与BUG处理相关文章请关注PHP中文网！
我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PMGoofonts是由开发人员和设计师丈夫签名的附带项目，它们都是版式的忠实拥护者。我们一直在标记Google
使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API！碰巧的是，我得到了完美的
将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时，它被称为Motion-Path，然后被更名。我
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
记事本++7.3.1
好用且免费的代码编辑器
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
SublimeText3汉化版
中文版，非常好用
