返回 登录
0

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

阅读2978

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344

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

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

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

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

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

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

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

解决:

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;}

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群,群号码:328058344

评论