IE浏览器兼容/图片整合

浏览器兼容 图片整合

Author : 朱盟 |吃火星的宝宝
TIME: 2019/6/4 学习的第8天
GIT HUB ： embaobao https://github.com/embaobao/EM
Email: 1132067567@qq.com
CSDN ： https://blog.csdn.net/embaobao
博客园： https://www.cnblogs.com/embaobao/

---

↓
↓
↓
↓ SECTION 1
↓
↓
↓

---

1. 图片整合

_self note
图片整合 要把右边放文字的图片整合到右边，不让他显示到左边的图片。

---

tip :margin-left 负值可以消除左边边框。

1. 小的不确定的放右边
2. 正图片单张不能大于100kb
3. 分类整合
4. 在小图片，有可能调整间距的图片的留足够的调整空间。
5. 在位置上设置上，避免关键字，用数字值。

---

↓
↓
↓
↓ SECTION 2
↓
↓
↓

---

2. css 3 常用选择器

1. :n-th-child () 匹配所有的子元素

• 1,2，…
• odd even奇数/偶数

2. n-th-of-type() 匹配同类型的
3. :first-child 选择属于父元素的第一个子元素的每个
4. :first-of-type

• p:first-of-type 选择属于其父元素的首个

  元素的每个

  元素。

5. :last-of-type p:last-of-type 选择属于其父元素的最后

   元素的每个

   元素。

6. [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。

[attribute~=value] [title~=flower] 选择 title 属性包含单词 “flower” 的所有元素。
8. [attribute|=value] [lang|=en] 选择 lang 属性值以 “en” 开头的所有元素。
9. :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
10. :last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。

---

↓
↓
↓
↓ SECTION 3
↓
↓
↓

---

3. 浏览器兼容

CSS-bug
如何处理了？
Chrome Firfox IE opera

1. trident IE 360 世界之窗 腾讯 遨游 不跨平台 不开源
2. Gecko firfox 开源 跨平台
3. webkit Chrome Safai 开源
4. presto Opera 渲染速度最快
5. Blink Goole Opera 排版引擎 跨平台

问题:

1. 子选择器 IE7以下不支持 ,IE7支持（！IE7 ↓）
2. 图片图片间隙、边框 |
   ！￥图片间隙，所有浏览器直接插入图片会出现图片间隙（~3px）

   display{display:block;}
   vertical-algin:baseline

3. 双倍浮相

   E6 高度，宽度 是最小高宽的功能。
   在浮动时 IE6外边距会双 倍显示 。
   方向相同 左浮动 就左边距 右浮动 右边距
   解决方法: IE6 在浮动时就可以解决此问题。
   display:inline 可以解析，正常那个浏览器不会解析，因为浮动自带块元素的特性。

4. input IE7边框

   在直接去掉输入框的边框时，border :0 ;能去掉所有浏览器的边框；
   border:none; IE7及以下去不掉。

5. 百分比溢出

   父元素的元素是百分比，子元素的宽度是50%浮动后溢出来了.
   方法:给溢出的第二个元素添加：clear:right;//只有Clear :right 才行、

6. 自带高度 div设置小高度 IE6

   解决方法：

   1. overflow:hidden
   2. font-size:0px; 只能解决3px 以上

7. 透明

   pacity:0~1；ie8以上 Chrome /firfox/360
   filter:alpha(opacity=1~100);
   IE9及IE9以下浏览器/IE6 、IE8 等认识

8. 列表的浮动

   在IE中li中的A 标签浮动 IE不能识别
   IE中要是在A标签转化为块元素加上高度
   加上宽度，那么A就会独占一行，Li的浮动就没用了
   解决方法是：Li a 都浮动。

指针的改变

cursor:pointer; IE支持；
给东西加可以点击的效果
waite 等待鼠标
move 移动

textarea{
resize:
horizontal; //水平改变
none;//不能改变
vertical; 垂直改变
outline:none;//只有Chrom 有 ，input 的外边线
}

pointer:none; 穿过遮罩层

提前了解

1. reflow ****
2. repaints
3. BFC
4. CSS3 width 属性的值