您好,欢迎来到纷纭教育。
搜索
您的当前位置:首页最新web前端经典面试题之css浏览器兼容性?

最新web前端经典面试题之css浏览器兼容性?

来源:纷纭教育
CSS浏览器兼容性?

答题技巧:因为这个问题主要看你经验,一般有了发经验的都会遇到这样的坑,你只要说出几个来致就可以了。

1、对齐文本和文本输入框

问题:

当input元素在设置了高时,在IE7、IE8、IE9下会出现文本和文本输入框不能对齐的现象,其他正常,包括opera

解决:

vertical-align:mile;

2、容器宽度在浏览器中解释不同

问题:

不同浏览器下宽度不同,比如说设置width:200px,在iE7、IE8、IE9下显示的200px,在FF、Chrome、Opera中显示的220px

解决:

用width:200px;*width:220px,其中iE7、IE8、IE9会识别两个宽度,以后者为准,故宽度为220px,在FF、Chrome、Opera中,识别个宽度,解析

3Div居中问题

问题:

IE7、IE8、IE9在设置了margin-left和margin-right为auto后,并不能使div居中显示,其他行

解决:

设定body居中,定义text-algin:center

4、字体小问题

问题:

对字体小small的定义不同,在Firefox和Chrome中为small,而IE7、IE8、IE9中为16px,差别挺

解决:

明确说明字体的小,例如16px

5td高度的问题(这里有兴趣的同学可以研究一下。知道了这个问题,还在研究当中)

问题:

在IE9、IE10、FF、chrome中table中td的高度不包含border的宽度,但IE7和IE8中td的高度包含了border的高度,设置line-height和height一样。

解决:

6、如何对其文本和文本输入框的内容()

问题:

当input元素在设置了高和设置了text-align:center时,在IE7、IE8、IE9下会出现文本和文本输入框内容不能对齐的现象,其他正常,包括opera

解决:

在样式中设置line-height:100px

7CSSHACK的方法

所有浏览器通用height:100px;

IE6专用_height:100px;

IE7专用*+height:100px;

IE6、IE7共用*height:100px;

IE7、FF共用height:100px!important;

代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以们把通用的放前面,越专用的越放后面

这里举了几个例子,同学们可以自己总结。

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- fenyunshixun.cn 版权所有 湘ICP备2023022495号-9

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务