首页 > 代码库 > 前端css兼容性与易混淆的点

前端css兼容性与易混淆的点

2024-08-22 13:59:39   218人阅读

 

一.常用的骨灰级清除浮动

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

解读浮动闭合最佳方案：clearfix

 

二.使用斜杠/分割的关键字

1.font

H2{
    font:12px/100% sans-serif;
}

分割的分别是 字体大小 与 行高 ,其他关键是用空白符分割。

2.background

div{
 background:#fff url(../images/xx.jpg) center center/50% 50%
}

分割的是background-position/background-size

3.border-radius

div{
    border-radius: 30% / 20%;
}

分隔的是:水平半径/垂直半径

 

三.内联元素相连之间存在间隙

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

解决:

1.多个标签写在一行

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

3.使用注释头尾相连

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

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

6.使用letter-spacing属性

多个Img标签之间的间隙处理方法

 

四.布局

注意父元素的定位方式 是相对 还是静态 这决定了其内部绝对定位与浮动元素

 

五.块级元素包裹内联元素的时候，总会出现几像素的差

<!--例子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 hack(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]-->

在css中使用:

.ie6 body{
    background-color:red;
}


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 */


七.box-sizing

1.常规的盒模型: box-sizing : content-box(width == content 不包括padiing border)

2.box-sizing : border-box width == content + padiing + border(相当于低级浏览器的怪异模式)

 

八.图片格式区别

格式 区别

jpg 有损压缩
png 无损压缩,透明图
gif 动态图像
webp 支持有损压缩和无损压缩的图片文件,压缩率极高,且画面丰富(有浏览器兼容性问题)


九.px,em,rem的区别

em,rem 相对大小

em相对父元素font-size

rem相对html根元素的font-size

px 绝对大小

 

十.不能继承的属性

多数边框类属性:如边框，补白，背景等。

 

十一.css中选择器的权重

依次变小:id>class>标签

 

十二.css颜色的问题

尽量使用16进制的颜色，类似#fff;一位内16进制的颜色是确定的一个色值。

而red这类的颜色值不是确定的，可能会受到用户代理即user agent stylesheet的影响。

 

十三.ie6.7不支持box-sizing: border-box;

解决:使用https://github.com/Schepp/box-sizing-polyfill这个垫片

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

 

十四.IE6.7 font与font-family

font起作用了 但是微软雅黑不起作用

解决:必须要设置font-family:"microsoft yahei"

 

十五.text-align text-indent vertical-align

1.text-align:作用于块级元素

　　如果要使得img居中，使用text-align是不行的，因为img不是块状元素。只需要在img外面套一层div即可。

<div style="text-align:center">
    <img src="XXX.jpg"/>
</div>

2.text-indent:作用于块级元素

3.vertical-align:作用于行内元素,基于baseline的位置调整

 

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

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

间隔线使用li的border去做

 

十七.ie8及一下的浏览器不支持:befor.:after

使用jquery的一个库：jquery.pseudo.js 做兼容 兼容低版本浏览器的时候

注意:不要使用太高的JQuery版本,会报错！(我用的是1.10)

 

十八.IE6不支持position:fixed

.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

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

解决:分开写，并且将!important的属性且在前面

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

 

不定期更新。。。

 转载自：http://www.cnblogs.com/zqzjs/

前端css兼容性与易混淆的点


联系
我们