请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 522|回复: 9

[css] CSS+DIV运用中对浏览器兼容技巧的总结

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-4 14:27:02 | 显示全部楼层 |阅读模式

当前互联网产品各式各样,就是浏览器吧,IE就出了6种,各版本区别很甚大,这可害苦了我们的前端同学,整天为了兼容性问题被产品追的到处跑。那么有哪些兼容性技巧可以让我们避免在出现此类问题呢?让我们看看一下几点总结吧!

1,盒解释器的不同解释.#box{
width:600px; //for ie6.0-
width:500px; //for ff+ie6.0
}
#box{
width:600px!important //for ff
width:600px; //for ff+ie6.0
width :500px; //for ie6.0-
}

2,在ie中隐藏css,使用子选择器

html>body #box{ }

3,只有ie识别

*html #box{ }

4,在ie/win有效而ie/max隐藏,使用反斜杠

5,给ie单独定义样式

6,浮动ie产生的双倍距离

#box{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);

#box{
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
diplay:table; //for ff,模拟table的效果
}

7,

for oprea only
@media all and (min-width:0px){
#box{ }
}

8,IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,

正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

9,页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个放到 <body> 标签下,然后为div指定一个类,CSS这样设计:

#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

同样的办法也可以为IE实现最大宽度:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}

10,清除浮动

.hackbox{
display:table; //将对象作为块元素级的表格显示
}

或者

.hackbox{
clear:both;
}

或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。-------这种的最麻烦的......

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

11,DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.

#box{
float:left;
width:800px;
}
#left{
float:left;
width:50%;
}
#right{
width:50%;
}
*html #left{
margin-right:-3px; //这句是关键
}

HTML代码

12,属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}

div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用


属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.


想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com


回复

使用道具 举报

0

主题

1007

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-3-25 17:31:18 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

3

主题

1133

帖子

53

积分

注册会员

Rank: 2

积分
53
发表于 2016-7-11 14:00:32 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

2

主题

1036

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2016-8-23 18:51:11 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

7

主题

971

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2018-2-6 22:25:31 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

2

主题

1164

帖子

156

积分

注册会员

Rank: 2

积分
156
发表于 2018-7-27 17:16:04 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

3

主题

1133

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2018-9-10 20:38:26 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

730

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2019-1-8 13:55:19 | 显示全部楼层
我是路过的,轻轻飘过
回复 支持 反对

使用道具 举报

1

主题

1030

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2019-2-11 15:59:08 | 显示全部楼层
有些不是太明白,研究研究再说
回复 支持 反对

使用道具 举报

8

主题

1138

帖子

88

积分

注册会员

Rank: 2

积分
88
发表于 2019-3-1 20:19:18 | 显示全部楼层
顶一个
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-3-19 05:44 , Processed in 0.242064 second(s), 31 queries .

快速回复 返回顶部 返回列表