浏览器兼容问题小结

1.默认的内外边距不同

问题:

各个浏览器默认的内外边距不同

解决:

*{margin:0;padding:0;}

2.水平居中的问题

问题:

设置text-align: center

ie6-7文本居中,嵌套的块元素也会居中

ff /opera /safari /ie8文本会居中,嵌套块不会居中

解决:

块元素设置

1、margin-left:auto;margin-right:auto

2、margin:0 auto;

3、

3.垂直居中的问题

问题:

在浏览器中想要垂直居中,设置vertical-align:middle;不起作用。例如:ie6下文本与文本输入框对不齐,需设置vertical-align:middle,但是文本框的内容不会垂直居中

解决:

给容器设置一个与其高度相同的行高

line-height:与容器的height一样

4.关于高度问题

问题:

如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。

如果设定了高度,内容过多时,ie6下会自动增加高度、其他浏览器会超出边框

解决:

1.设置overflow:hidden;

2.高度自增height:auto!important;height:100px;

5. IE6默认的div高度

问题:

ie6默认div高度为一个字体显示的高度,所在ie6下div的高度大于等于一个字的高度,因此在ie6下定义高度为1px的容器,显示的是一个字体的高度

解决:

为这个容器设置下列属性之一

1、设置overflow:hidden;

2、设置line-height:1px;

3、设置zoom:0.08

6. IE6最小高度(宽度)的问题

问题:

ie6不支持min-height、min-width属性,默认height是最小高度,width是最小宽度。

解决:

使用ie6不支持但其余浏览器支持的属性!important。

设置属性min-height:200px; height:auto !important; height:200px;

7. td高度的问题

问题:

table中td的宽度都不包含border的宽度,但是oprea和ff中td的高度包含了border的高度

解决:

设置line-height和height一样。在ie中如果td中的没有内容,那么border将不会显示

8. div嵌套p时,出现空白行

问题:

div中显示

文本

,ff、oprea、Chrome:top和bottom都会出现空白行,但是在ie下不会出现空白行。

解决:

设置p的margin:0px,再设置div的padding-top和padding-bottom

9. IE6-7图片下面有空隙的问题

问题:

块元素中含有图片时,ie6-7中会出现图片下有空隙

解决:

1、在源代码中让和

在同一行

2、将图片转换为块级对象display:block;

3、设置图片的垂直对齐方式vertical-align:top/middle/bottom

4、改变父对象的属性,如果父对象的宽、高固定,图片大小随父对象而定,那么可以对父元素设置:overflow:hidden;

5、设置图片的浮动属性float:left;

10. IE6双倍边距的问题

问题:

ie6中设置浮动,同时又设置margin时,会出现双倍边距的问题

例float:left;width:100px;margin:0 100px;

解决:

设置display:inline;

11. IE6 width为奇数,右边多出1px的问题

问题:

父级元素采用相对定位,且宽度设置为奇数时,子元素采用绝对定位,在ie6中会出现右侧多出1像素

解决:

将宽度的奇数值改成偶数

12. IE6两个层之间3px的问题

问题:

左边层采用浮动,右边没有采用浮动,这时在ie6中两层之间就会产生3像素的间距

解决:

1、右边层也采用浮动float

2、左边层添加属性margin-right:-3px;

13. IE6子元素绝对定位的问题

问题:

父级元素使用padding后,子元素使用绝对定位,不能精确定位

解决:

在子元素中设置_left:-20px; _top:-1px;

14.显示手型cursor:hand

问题:

ie6/7/8、opera都支持

但是safari、ff不支持

解决:

写成cursor:pointer;  (所有浏览器都能识别)

15. IE6-7 line-height失效的问题

问题:

在ie中img与文字放一起时,line-height不起作用

解决:

都设置成float

16. td自动换行的问题

问题:

Table宽度固定,td自动换行

解决:

设置Table的table-layout:fixed,td的word-wrap:break-word

17.子容器浮动后,父容器扩展问题

问题:

子容器都float以后,父容器没有设定高度,父容器将不会扩展

解决:

只需要添加一个clear:both的div,代码如下:

子容器a

子容器b

18.透明png图片会带背景色

问题:

在ie6下透明的png图片会带一个背景色

解决:

background-image: url(icon_home.png);

background-repeat: no-repeat;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');

_background-image: none;

19. list-style-position默认值的问题

问题:

ie下list-style-position默认为inside,  firefox默认为outside

解决:

css中指定为outside即可解决兼容性问题

20. list-style-image准确定位的问题

问题:

li前设置图片时,图片与其后的文字对齐问题

解决:

1、采用背景定位和字符缩进的方法

background:url() no-repeat left center;text-index:16px;

2、采用相对定位方法

li设置list-style:url();

li的子元素position:relative;top:-5px;

21. ul标签默认值的问题

问题:

ul标签在ff中默认是有padding值的,而在ie中只有margin有值

解决:

定义ul{margin:0;padding:0;}就能解决大部分问题

22. IE中li指定高度后,出现排版错误

问题:

在ie下如果为li指定高度可能会出现排版错位

解决:

设置line-height

23. ul或li浮动后,显示在div外

问题:

div中的ul或li设置float以后,都不在div中

解决:

必须在ul标签后加

来闭合外层div

24. ul浮动后,margin变大

问题:

ul设置float后,在ie中margin将变大

解决:

设置ul的display:inline,li的list-style-position:outside

25. li浮动后,margin变大

问题:

li设置float后,在ie中margin将变大

解决:

设置li的display:inline

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

推荐阅读更多精彩内容