Css兼容性

一、ie6最小盒子问题

第一,IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大

解决办法很简单,就是将盒子的字号,设置小(小于盒子的高),比如0px。
height: 4px; _font-size: 0px;

我们现在介绍一下浏览器hack。hack就是“黑客”,就是使用浏览器提供的后门,针对某一种浏览器做兼容。
IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性


二、清除浮动的方法

IE6不支持用overflow:hidden;来清除浮动的

解决办法,以毒攻毒。追加一条
完整写法:
overflow: hidden; _zoom:1;


三、关于margin的IE6兼容问题(双边距)

IE6双倍margin bug
问题:当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。
1 <ul> 2 <li></li> 3 <li></li> 4 <li></li> 5 </ul>

11.png

解决方案:
1.使浮动的方向和margin的方向,相反。所以,你就会发现,我们特别喜欢,浮动的方向和margin的方向相反。并且,前端开发工程师,把这个当做习惯了。
float: left; margin-right: 40px;
2.使用hack(没必要,别惯着这个IE6)单独给队首的元素,写一个一半的margin
` <li class="no1"></li>

ul li.no1{
_margin-left:20px;3 }

`


四、IE6的3px bug

2.png

解决办法:
不用管,因为根本就不允许用儿子踹父亲。所以,如果你出现了3px bug,说明你的代码不标准(给父亲padding代替儿子margin)


五、font属性

网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装
页面中,中文我们只使用: 微软雅黑、宋体、黑体。 如果页面中
英语:Arial 、 Times New Roman
需要其他的字体,那么需要切图。

为了防止用户电脑里面,没有微软雅黑这个字体。就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,没有安装微软雅黑字体,那么就是宋体:
font-family: "微软雅黑","宋体";
备选字体可以有无数个,用逗号隔开。

我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体:
font-family: "Times New Roman","微软雅黑","宋体";

行高可以用百分比,表示字号的百分之多少。一般来说,都是大于100%的,因为行高一定要大于字号。


六、a链接的伪类样式

伪类

也就是说,同一个标签,根据用户的某种状态不同,有不同的样式。这就叫做“伪类”。
类就是工程师加的,比如div属于box类,很明确,就是属于box类。但是a属于什么类?不明确。因为要看用户有没有点击、有没有触碰。所以,就叫做“伪类”。
伪类用冒号来表示。

a标签有4种伪类,要求背诵
:link 表示, 用户没有点击过这个链接的样式。 是英语“链接”的意思。 :visited 表示, 用户访问过了这个链接的样式。 是英语“访问过的”的意思。 :hover 表示, 用户鼠标悬停的时候链接的样式。 是英语“悬停”的意思。 :active 表示, 用户用鼠标点击这个链接,但是不松手,此刻的样式。 是英语“激活”的意思。

33.png

记住,这四种状态,在css中,必须按照固定的顺序写:
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序,那么将失效。“爱恨准则”love hate。必须先爱,后恨。

记住,所有的a在设置了text/font后就不继承text、font这些东西。因为a自己有一个伪类的权重。

最标准的,就是把link、visited、hover都要写。但是前端开发工程师在大量的实践中,发现不写link、visited浏览器也挺兼容(原因是给a设置了颜色字体大小等,link和visited就显示了默认的a的样式)。所以这些“老油条”们,就把a标签简化了

a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态。 1 .nav ul li a{ 2 display: block; 3 width: 120px; 4 height: 50px; 5 text-decoration: none; 6 background-color: purple; 7 color:white; 8 } 9 .nav ul li a:hover{ 10 background-color: orange; 11 } 12 .nav ul li a:visited{ 13 color:red; 14 }


七 IE56 中盒子模型的问题

问题:在IE56 中盒子模型的宽度(width)的计算是:border+padding+contentWidth的。与box-sizing:border-box类似。
而其他浏览器盒子模型默认是:content-box(也就是说你给一个盒子width是指的是内容的宽,盒子实际的宽是width+padding+border)

上下外边距合并问题

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

只有标准文档流中块框的垂直外边距才会发生外边距合并。行内元素、浮动元素或行内块元素或绝对定位之间的外边距不会合并

当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:

CSS 外边距合并实例 1

当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
CSS 外边距合并实例 2

尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
CSS 外边距合并实例 3

8.IE5中margin:0 auto;失效

在IE5中对块元素存在一个外边距处理BUG。块元素有时会被视作行内元素。所以margin:0 auto;失效。

兼容ie5的做法:
要居中的元素设置margin:0 auto;
在元素的父元素或者给该居中元素包裹一层div,给这个div或者父元素设置:text-align:center;

IE678不支持opacity属性

兼容方法:

opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */

orient/strip%7CimageView2/2/w/1240)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,646评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,979评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,391评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,356评论 0 215
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,740评论 3 293
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,836评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,022评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,764评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,487评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,728评论 2 252
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,200评论 1 263
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,548评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,217评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,134评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,921评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,919评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,766评论 2 274

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,760评论 0 6
  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与F...
    年轻人多学点阅读 339评论 0 7
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,199评论 0 8
  • 惊醒篇·被杀死的悠哉 2007年,第一次来深圳旅游,第一次走进大都市,第一次知道原来坐个公交都需要检查身份证的。那...
    闲仁阅读 190评论 0 0