Compatibilité CSS et gestion des BUG
骨灰级清除浮动
.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中文网！
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Créer votre propre bragdoc avec Eleventy
Mar 18, 2025 am 11:23 AM
Quelle que soit le stade dans lequel vous vous trouvez en tant que développeur, les tâches que nous effectuons - qu'elles soient grandes ou petites - ont un impact énorme dans notre croissance personnelle et professionnelle.
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Utilisons (x, x, x, x) pour parler de spécificité
Mar 24, 2025 am 10:37 AM
Je discutais avec Eric Meyer l'autre jour et je me suis souvenu d'une histoire d'Eric Meyer de mes années de formation. J'ai écrit un article de blog sur la spécificité CSS, et
